0

アプリケーションのすべてのページにロードする次のスクリプトがあります。

           $(document).ready(function() { 
          $('ul li').click(function(){
            $("li").removeClass("current_page_item");
            $(this).addClass("current_page_item");
          });
        });

私のナビゲーションhtmlは次のようになります：

                <ul id="dropmenu">
                    <li class="active">
                        <%=  link_to 'Home Page',  welcome_index_path %>                    
                    </li>
                    <li>
                        <%=  link_to 'Business Owners',  business_owners_path %>

                    </li>
                </ul>

「ビジネス オーナー」リンクをクリックするたびに、アクティブなページを識別するための画像が最初にホームページ リンクからビジネス オーナー リンクに移動し、ページをリロードするとすぐにホームページ リンクに戻ります。ページの読み込み後に「アクティブ」リンクの状態を保持するjQueryの方法はありますか?

4

1 に答える 1

1

これ以上の情報がなければ、これについて間違った方向に進んでいる可能性があると思います。追加のコンテンツを表示/ロードするためにディープリンクを使用しようとしていますか? もしそうなら、あなたのページはリロードされるべきではありません。これを実現するには、jquery アドレスを使用できます。http://www.asual.com/jquery/address/

ページが実際に別のページにリンクしている場合、これは CSS を使用して行うことができます。1 つの解決策は、アクティブなナビゲーションを正しくスタイルするボディにクラスを設定することです。

HTML

<body class="business">

    <ul id="dropmenu">
        <li class="nav-home"><a href="#">Home</a></li>
        <li class="nav-business"><a href="#">Business</a></li>
    </ul>

</body>



CSS

#dropmenu a {
    display:block;
}
#dropmenu a:hover {
    border:1px solid #ccc;
}

* active */
.business .nav-business {
    border:1px solid #000;
}

関連フィドル: http://jsfiddle.net/tNpVr/

于 2013-03-10T02:54:04.707 に答える