0

基本的に問題は自明です。2つの別々のファイルを用意するのではなく、JavaScriptの小さなスニペットを組み合わせる方法がわかりません。

2つのコードは次のとおりです。

$(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つの機能は異なります。
  2. 2つの関数スターターは2回必要ありません$(function(){})。
于 2012-11-14T13:59:28.750 に答える
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を使用しているかどうかを検出する必要があるか、corectremoveClassコードを選択しない必要がある点が異なります。

また、あなたのコードでは最初$(function()に必要です。そうしないと、ドキュメントがロードされる前に、その中のコードが開始される可能性があります。ただし、両方のコードを1つに入れることができます$(function()

于 2012-11-14T14:01:47.863 に答える
0

完全に機能するサンプル。これにより、最初のUL LIの最初のLIが赤になり、2番目のULLIから赤が削除されます。これで、2つの機能が組み合わされました。

    <!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 に答える