Question

我的导航栏工作有问题。这可能很容易解决，但我已经尝试了很长时间，无法让它工作。对于CSS目的，我希望导航栏中的列表项在单击时单击并在单击其他导航栏项时删除该类。由于某种原因，它不起作用。我将在这里显示代码：

<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(){部分的错误，说它不是函数。

我希望这已经解释了我的问题，我仍然认为它可能很容易解决，但我已经坚持了一整天，所以我希望这里有人可以帮助我。

Answer 1

始终在.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');
    });
});

Answer 2

您添加“已选择”类的元素看起来不正确。

在您的html标记中，您有<li class='selected'><a href=''>，但在您的javascript中，您要移除并在selected元素上添加a类。

所以你想做类似的事情：

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

除非您打算在a元素上使用该类，否则您的初始HTML就错了，然后Sergio的解决方案就可以了。

Answer 3

这里有“LI”元素中的“selected”类

<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”元素上添加“selected”类

所以试试这个：

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

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

3 个答案: