HTML菜單上的addClass/removeClass不起作用

我在導航欄工作時遇到問題。這可能很容易解決，但我一直在嘗試一些年齡段的東西，並且無法實現。爲了CSS的目的，我希望導航欄中的列表項在單擊時獲取「已選」類，並在單擊不同導航欄項目時將其刪除。由於某種原因，它不起作用。我會在這裏展示的代碼：HTML菜單上的addClass/removeClass不起作用

<script type="text/javascript"> 
      $('ul.navigation li a').click(function(){ 
       $('ul.navigation li a').removeClass('selected'); 
       $(this).addClass('selected'); 
      }); 
     </script>

我把這個部分在<head>...</head>

這是它不會有任何效果的導航欄：

<div id="menuWrapper"> 
    <nav> 
     <ul class="navigation underlinemenu" id="gooeymenu"> 
        <li id="home" class="selected"><a href="/html/index.php">Home</a></li> 
        <li id="work"><a href="/html/work.php">Work</a></li> 
        <li id="services"><a href="/html/services.php">Services</a></li> 
        <li id="about"><a href="/html/about.php">About me</a></li> 
        <li id="contact"><a href="/html/contact.php">Contact</a></li>     
     </ul> 
    </nav> 
</div>

現在，當我去到瀏覽器並檢查該元素時，它沒有顯示將「選定」類添加到所點擊的菜單項的任何指示。當我檢查控制檯時，它給出了關於JavaScript的$('ul.navigation li a').click(function(){部分的某種錯誤，稱它不是函數。

我希望這解釋了我的問題，我仍然認爲這可能很容易解決，但我一直堅持這一整天，所以我希望這裏的任何人都可以幫助我。

來源

2012-01-28 Chris

請務必在.ready()函數內連接您的事件。

如果將.ready函數應用於文檔，則確保您的事件已連線。 Read here作一簡要介紹使用$(document).ready()

//Wait for the DOM to load and be ready: 
$(document).ready(function() { 
    $('ul.navigation li a').click(function(){ 
     //Find the navigation link that is actually with the 'selected' class. 
     $('ul.navigation li.selected').removeClass('selected'); 
     $(this).parent().addClass('selected'); 
    }); 
});

來源

2012-01-28 16:37:18

很好的答案，不幸的是這並沒有解決我的問題。它可能是別的嗎？ – Chris 2012-01-28 16:44:34

@ChrisVossen：看到我的編輯，你應用了錯誤的jQuery選擇器。它應該爲你工作。 – 2012-01-28 16:47:22

我試過了你所說的一切，我很抱歉地說，但它仍然無法正常工作，也許它與我正在使用的jquery插件有關; 'gooeymenu'。 – Chris 2012-01-28 17:18:30

您要添加的「選擇」類看起來不正確的元素。

在你的html標記中，你有<li class='selected'><a href=''>，但在你的JavaScript中，你正在刪除並在a元素上添加selected類。

所以，你想要做的事，如：

$(document).ready(function() { 
    $('ul.navigation li a').click(function(){ 
    $('ul.navigation li.selected').removeClass('selected'); 
    $(this).parent().addClass('selected'); 
    }); 
});

除非你的意思是有a元素的類，那麼就您最初的HTML是錯誤的，然後Sergio的解決方案是可行的。

來源

2012-01-28 16:44:14 redronin

在這裏，你必須在「LI」元素中的「選擇」類

<ul class="navigation underlinemenu" id="gooeymenu"> 
        <li id="home" class="selected"><a href="/html/index.php">Home</a></li> 
        <li id="work"><a href="/html/work.php">Work</a></li> 
        <li id="services"><a href="/html/services.php">Services</a></li> 
        <li id="about"><a href="/html/about.php">About me</a></li> 
        <li id="contact"><a href="/html/contact.php">Contact</a></li>     
</ul>

，但在你的JavaScript要刪除和添加「選擇」類中的「A」元素

所以上試試這個：

$(document).ready(function() {  
$('ul.navigation li a').click(function(){ 
        $('ul.navigation li').removeClass('selected'); 
        $(this).parent().addClass('selected'); 
    }); 
});

來源

2012-01-28 16:44:32 Luke

HTML菜單上的addClass/removeClass不起作用

回答

相關問題