0

基本上这个问题是不言自明的。我不知道如何组合小片段的 javascript 而不是拥有两个单独的文件。

这两个代码是：

$(function(){
    $('.navbar li').each(function(){
      if(window.location.href.indexOf($(this).find('a:first').attr('href'))>-1)
        {
      $(this).addClass('active').siblings().removeClass('active');
        }
    });
});

$(function(){
    $('.dropdown-menu li').each(function(){
      if(window.location.href.indexOf($(this).find('a:first').attr('href'))>-1)
        {
      $(this).removeClass('active')
        }
    });
});

还有一个问题，第一个$(function()有必要吗？

谢谢你的帮助。

4

3 回答 3

1

你可以这样做：

创建一个函数并在其下调用它。或者，你这样做：

$(function(){
    $('.navbar li').each(function(){
      if(window.location.href.indexOf($(this).find('a:first').attr('href'))>-1)
        {
      $(this).addClass('active').siblings().removeClass('active');
        }
    });
    $('.dropdown-menu li').each(function(){
      if(window.location.href.indexOf($(this).find('a:first').attr('href'))>-1)
        {
      $(this).removeClass('active')
        }
    });
});

一些注意事项：

  1. 这两个功能是不同的。
  2. 您不需要两个函数启动器，$(function(){})两次。
于 2012-11-14T13:59:28.750 回答
0

完整的工作样本，这将使第一个 UL 的第一个 LI 变为红色，并从第二个 ul LI 中删除红色。您的两个功能现在组合在一起。

    <!DOCTYPE HTML>
    <html lang="en-US">
    <head>
        <meta charset="UTF-8">
            <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>
        <title></title>
        <style type="text/css">
        .active {background-color:red}
        ul.dropdown-menu>li.active {background-color:red}
        </style>
    </head>
    <body>

    </body>
    <ul class="navbar">
    <li><a href="file:///C:/Users/cisadohe/Desktop/new10.htm">first</a></li>
    <li>old</li>
    <li>new</li>
    <li>4</li>
    </ul>

    <ul class="dropdown-menu">
    <li class="active"><a href="file:///C:/Users/cisadohe/Desktop/new10.htm">first</a></li>
    <li>old</li>
    <li>new</li>
    <li>4</li>
    </ul>


    <script type="text/javascript">
    $(function(){
        $('.navbar li').each(function(){
          if(window.location.href.indexOf($(this).find('a:first').attr('href'))>-1)
            {
          $(this).addClass('active').siblings().removeClass('active');
            }
        });

        $('.dropdown-menu li').each(function(){
          if(window.location.href.indexOf($(this).find('a:first').attr('href'))>-1)
            {
          $(this).removeClass('active')
            }
        });
    });
    </script>
    </html>
于 2012-11-14T14:06:57.447 回答
0

你可以这样：

$(function(){
    $('.navbar li, .dropdown-menu li').each(function(){
      if(window.location.href.indexOf($(this).find('a:first').attr('href'))>-1)
        {
            if($(this).parents(".navbar").length > 0)//this is to figure out if we are working with LI inside .navbar or not.
                $(this).addClass('active').siblings().removeClass('active');
            else
                $(this).removeClass('active')

        }
    });
});

功能几乎相同，只是您需要检测您是否正在使用 .navbar 中的 LI 来选择正确的removeClass代码。

此外，在您的代码中首先$(function()是必要的。否则，其中的代码可以在加载文档之前启动。但是你可以把两段代码放在一个里面$(function()

于 2012-11-14T14:01:47.863 回答