Question

这些链接组是我的nav元素。 var make_button_active一旦点击链接就删除并插入活动类。使用CSS，类active将为链接的文本指定橙色。我有另一个链接在这个组之外。它是一个标志，链接到#home。我希望一旦点击它，就会从ul.menu内的链接中删除活动类。这样，当点击#home时，导航元素不会保持橙色。我已经尝试过了，但我是javascript的初学者。

你可以帮我解决这个问题吗？

HTML：

<nav>
    <div id="logo">
        <a href="#home" class="panel"><img src="_img/logo.png" alt="DR logo" /></a>
    </div>
    <div id="categories">
        <ul class="menu">
                <li><a href="#aboutMe">ABOUT ME</a></li>
                <li><a href="#showcase">SHOWCASE</a></li>
                    <li><a href="#howWork">HOW DO I WORK</a></li>
            <li><a href="#meet">LETS MEET</a></li>  
        </ul>
    </div>
    <hr>
</nav>

CSS：

.menu li.active a {
     color: #ff530d;
}

JQUERY：

<script type="text/javascript"> 
         var make_button_active = function()
           {
              //Get item siblings
              var siblings =($(this).siblings());
              //Remove active class on all buttons
              siblings.each(function (index)
                {
                  $(this).removeClass('active');
                }
              );

              //Add the clicked button class
              $(this).addClass('active');
            }

        var classOut = function()
            {
                $(".menu li").removeClass('active');
            }


             $(document).ready(function() {
            $(".menu li").click(make_button_active);

            $("#home").click(classOut);
        });
        </script>

Answer 1

我重写了整个JavaScript，this有帮助吗？

我将您的JavaScript更改为：

$(document).ready(function()
{

  $('.menu a').click(function(e)
  {
    e.preventDefault();
    $('.menu a').removeClass('active');
    $(this).addClass('active');        
  });

  $('#logo > a').click(function(e)
  {
    e.preventDefault();
    $('.menu a').removeClass('active');        
  });    

});

Answer 2

起初：jQuery !== JavaScript

此外，#home不会选择您的主页链接，因为它不会选择href，而是选择ID。

改为使用$("#logo a").click(classOut);

此外，您的函数make_button_active应如下所示：

var make_button_active = function() {
      $('.active').removeClass('active');
      $(this).addClass('active');
}

您不需要遍历所有兄弟姐妹，您的active一次只能在一个元素上，您只需选择此项并删除该类，然后再将其设置在新选择的元素上。

最后，您不一定要做函数表达式 var make_button_active = function(){...}，函数声明在您的情况下完全没问题：function make_button_active(){...} 。但是，使用函数通常很好，而不像Sam使用匿名函数，因为您可以轻松地重用这些函数。

您的整个脚本应如下所示：

<script type="text/javascript">

    function make_button_active(){
        $('.active').removeClass('active');
        $(this).addClass('active');
    }
    function classOut(){
        $(".menu li").removeClass('active');
    }

    $(document).ready(function() {
        $(".menu li").click(make_button_active);
        $("#logo a").click(classOut);
    });
</script>

Answer 3

标记中没有ID为home的元素：

<a href="#home" id='home' class="panel"><img src="_img/logo.png" alt="DR logo" /></a>

您正在使用ID选择器，而您的选择器不会选择具有#home href属性的元素。您可以向元素添加ID或使用属性选择器：

$("a[href='#home']").click(classOut);

此外，您不需要使用each方法：

var make_button_active = function() {
    $(this).addClass('active').siblings().removeClass('active')
}
var classOut = function() {
    $(".menu li").removeClass('active');
}

$(document).ready(function() {
    $(".menu li").click(make_button_active);
    $("#home").click(classOut);
});

http://jsfiddle.net/hJdXU/

单击另一个链接后删除一组链接

3 个答案: