0

这些链接组是我的导航元素。var make_button_active单击链接后删除并插入活动类。使用 CSS，class 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;
}​

查询：

<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>
4

3 回答 3

3

我重写了你的整个 JavaScript，这有帮助吗？

我将您的 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');        
  });    

});

​</p>

于 2012-10-03T21:39:25.360 回答
3

首先：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>
于 2012-10-03T21:42:24.340 回答
1

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

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

您正在使用 ID 选择器，并且您的选择器没有选择具有#homehref 属性的元素。您可以将 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/

于 2012-10-03T21:38:48.727 回答