的Java语言更改效果 <ul><li> 工作不正常

Question

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!

Answer 1

This is because from your html

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

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

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

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

 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> 

Answer 2

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:

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

Answer 3

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 || navItem.contains(event.target)) {
                navItem.classList.add(activeClass);
            } else {
                navItem.classList.remove(activeClass);
            }
        });
    });
}

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>

Answer 4

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>