1

私はtwitterブートストラップを使用しており、リストアイテムが選択されているときにjqueryを使用して、ナビゲーションリストアイテムに「active」クラスを設定しようとしています。

以下は私のコードです 

            <ul class="nav nav-pills pull-right">
              <li id="home"><a href="/">Home</a></li>
              <li id="gadget"><a href="/category/gadgets"><span>Gadgets + Geeky</span></a></li>
              <li id="toys"><a href="/category/toys"><span>Toys</span></a></li>
              <li id="wearables"><a href="/category/wearables"><span>Wearables</span></a></li>
              <li id="home_office"><a href="/category/home-office"><span>Home + Office</span></a></li>
              <li id="food_drinks"><a href="/category/food-drinks"><span>Food + Drinks</span></a></li>
              <li id="kids"><a href="/category/kids"><span>Kids Stuff</span></a></li>
            </ul>
            <script>
              $( document ).ready(function() {
                 $('ul li').click(function() {
                    // remove classes from all
                    $('li').removeClass('active');
                    // add class to the one we clicked
                    $(this).addClass("active");
                 });
              });
            </script>

しかし、リストアイテムをクリックすると、ナビゲーションアイテムに一時的にアクティブなクラスが設定されますが、ページが更新され、アクティブなクラスがない現在クリックされているリストアイテムが表示されます。

JQueryを使用してナビゲーションバーのアクティブクラスを切り替えるで説明した手順に従いましたが、 成功しませんでした。

誰かが私が欠けているものを指摘できますか？

ありがとう

4

1 に答える 1

1

このスクリプトはリダイレクトが発生した後に実行されるため、これでうまくいくはずです。アクティブリンクにダミークラス「activeLink」を追加し、そのアクティブリンクに基づいてリストを選択します。

 $(function(){
        $('ul li a').removeClass('activeLink');
        var url = window.location.pathname, 
            // create regexp to match current url pathname also to match the home link
            urlRegExp = new RegExp(url == '/' ? window.location.origin + '/?$' : url.replace(/\/$/,'')); 
            // now grab every link from the navigation
            $('.ul li a').each(function(){
                // and test its normalized href against the url pathname regexp
                if(urlRegExp.test(this.href.replace(/\/$/,''))){
                    $(this).addClass('activeLink');
                }
            });

           $('li').removeClass('active');
           $('a.activeLink').closest('li').addClass('active');
    })

;

于 2013-02-27T06:19:11.467 に答える