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

Question

我是Java語言的新手。 我想點擊導航欄以更改某些效果（在文字上加下划線）

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>

就像屏幕截圖一樣，單擊“ text1”選項卡時，將刪除主頁下划線，並添加“ text1”下划線...

但是，對於我的編碼，單擊“ text1”時，下划線不會更改，而是保持在“ home”。 有人知道這里的問題嗎？ 謝謝！

Answer 1

這是因為從您的HTML

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

這是指<a> ，因此dom實際上是<a>

從您的SetTabState(dom) ，dom假設是<li>嗎？

您可以將事件委托添加到<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> 

Answer 2

就像其他人所說的那樣， dom變量引用了<a>元素，但是您正在嘗試從<li>刪除該類。 除了使用.find ，您還可以直接使用underline_text類選擇元素：

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

Answer 3

由於您需要更改其他元素的狀態，而不是單擊的唯一元素，因此建議您對整個元素組使用一個函數，而不要對每個元素處理click事件。 這是我的代碼：

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

您可以這樣：-

 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>