1

クリック時にリスト項目のクラスを変更するために、ASP.NET で jQuery コードを使用しています。コードは正常に動作していますが、問題は、<li>しばらくの間クラスが変更されることですが、コードが完全に読み込まれると保持できなくなります。私のコードは次のようなものです：

jQuery:

$(document).ready(function () {
    //On Click Event
    $("ul.tabs li").click(function () {
        $("ul.tabs li").removeClass("active"); //Remove any "active" class
        $(this).addClass("active"); //Add "active" class to selected tab
    });
});

HTML: 

<div class="menu_nav">
    <ul class="tabs">
        <li><a href="default.aspx"><span>Home Page</span></a></li>
        <li><a href="support.aspx"><span>Support</span></a></li>
        <li><a href="aboutus.aspx"><span>About Us</span></a></li>
        <li><a href="services.aspx"><span>Services</span></a></li>
        <li><a href="contactus.aspx"><span>Contact Us</span></a></li>
    </ul>
</div>
4

4 に答える 4

1

あなたのコードは正しいです。こちらを参照してください jsfiddle.net/S3hGq/

しかし、クリックした後、ブラウザは URL をロードします。これはリンクであるためです。リロード後、「アクティブな」クラスはもちろんもう設定されていません。

それはどうなるのですか？役立つ情報を教えてください...

于 2012-12-17T13:57:18.747 に答える
0

間違ったアプローチ。最後にクリックされたアンカーを (たとえば ID に基づいて) 「記憶」するか、現在のドキュメントの場所を読み取り、それに基づいて適切なアイテムを強調表示する必要があります。

2 番目のアプローチのコードを示します。

$(document).ready(function () {
    //read current page:
    var page = document.location.href.split("/").splice(-1,1);

    //find proper item and mark it active:
    $("ul.tabs li a[href='" + page + "']").addClass("active");
});
于 2012-12-17T14:03:19.553 に答える
0

Struts 2 や Spring MVC for Java などの一部のフレームワークでは、以前に共有した JavaScript は時代遅れであると言われているため、jquery で同じ機能の新しいバージョンを考え出しました。

    <script type="text/javascript">
          $(document).ready(function(){
          var testtitle=$('title').text();
          $("#"+testtitle).addClass('current');
          }); 
    </script>
于 2013-09-11T06:54:53.070 に答える
0

すべてのliタグに id を指定する必要があります。リンク先のページ タイトルと同じです。たとえば、dashboard.aspx へのリンクがある場合は、id としてダッシュボードがあり、dashboard.aspx にもダッシュボードとしてタイトルがあり、次のコードを記述します。

<script language="javascript" type="text/javascript">
    window.onload = function changeClass() {
        document.getElementById(document.title).setAttribute("class", "current");
    }
</script>

このコードでは、ID でページのタイトルを見つけ、クラスをリンクされた li に設定します。

于 2012-12-20T09:17:42.453 に答える