Clash Royale CLAN TAG#URR8PPP

Javascript change effect for <ul><li> is not working correctly

I am new to Javascript. I want to click on the Navi bar to change some effect(underline to the words)

Coding for HTML

<div class="nav" id="nav">
<ul>
<li><a href="index.html" class="underline_text" onclick="SetTabState(this)">Home</a></li>
<li><a href="index.html#text1" onclick="SetTabState(this)">text1</a></li>
<li><a href="index.html#text2" onclick="SetTabState(this)">text2</a></li>
</ul>
</div>

<div id="text1"> <!--> jump to here<-->
.....
</div>

<div id="text2"> <!--> jump to here<-->
.....
</div>

<script>
function SetTabState(dom)
$("#nav ul li").find('.underline_text').removeClass('underline_text');
$(dom).addClass('underline_text');

</script>


Just like the screenshot, when clicking "text1" tab, the home underline is removed and "text1" underline is added...

However, for my coding, when clicking on "text1", the underline is not changing and remain at "home". Anyone knows the problem here? Thx!

class="underline_text"

li

4 Answers
4

This is because from your html

<a href="index.html#text2" onclick="SetTabState(this)">


this refer to <a>, so dom is actually an <a>

<a>

<a>

From your SetTabState(dom), dom suppose to be a <li>?

SetTabState(dom)

<li>

You can add a event delegation to the <ul> with delegate to the <li>, like

<ul

<li>

function SetTabState(dom)
$("#nav ul li").find('.underline_text').removeClass('underline_text');
$(dom).addClass('underline_text');




$(document).ready(function()


$("#nav ul").on('click', 'li', function()
SetTabState(this)
)
);

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="nav" id="nav">
<ul>
<li><a href="#" class="underline_text">Home</a></li>
<li><a href="#text1">text1</a></li>
<li><a href="#text2">text2</a></li>
</ul>
</div>

<div id="text1">
<!-->jump to here
<-->
.....
</div>

<div id="text2">
<!-->jump to here
<-->
.....
</div>

As others have said, the dom variable refers to the <a> element, but you're trying to remove the class from the <li>. Instead of using .find, you can directly select the element with the underline_text class:

dom

<a>

<li>

.find

underline_text

<script>
function SetTabState(dom)
$("#nav ul li .underline_text").removeClass('underline_text');
$(dom).addClass('underline_text');

</script>


You can do like this :-

function SetTabState(dom)
$("#nav ul li a").removeClass('underline_text');
$(dom).addClass('underline_text');


ul
padding: 0;
margin: 0;
list-style: none;

ul li a
text-decoration: none;

ul li a.underline_text
border-bottom: 1px solid #000;


<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="nav" id="nav">
<ul>
<li><a href="#" class="underline_text" onclick="SetTabState(this)">Home</a></li>
<li><a href="#" onclick="SetTabState(this)">text1</a></li>
<li><a href="#" onclick="SetTabState(this)">text2</a></li>
</ul>
</div>

Because you need to change the state of the other elements rather than the only element you clicked, I suggest you use a function for the whole group of elements instead of handle click event on each element. This is my code:

function initClickableNav(nav)
var navItems = nav.querySelectorAll('a');
var activeClass = 'underline_text';
nav.addEventListener('click', function (event)
.forEach.call(navItems, function (navItem)
if (navItem === event.target );
);


initClickableNav(document.querySelector('#nav'));


HTML

<div class="nav" id="nav">
<ul>
<li><a href="index.html" class="underline_text"><span>Home</span></a></li>
<li><a href="index.html#text1">text1</a></li>
<li><a href="index.html#text2">text2</a></li>
</ul>
</div>


By clicking "Post Your Answer", you acknowledge that you have read our updated terms of service, privacy policy and cookie policy, and that your continued use of the website is subject to these policies.