2

いくつかの GridViews を含むページがあります。タブメニューを使用してそれらをタブに保持しました。4 つのタブがあります。

私の問題は、ページがリロードされると、タブが最初のタブにリセットされることです。

HTML:

<div id="tabbed_box_1" class="tabbed_box">
    &nbsp; &nbsp;
    <div class="tabbed_area">
        <ul class="tabs">
            <li><a href="#" title="content_1" class="tab active">Bottom Banner</a></li>
            <li><a href="#" title="content_2" class="tab">Side Banner Bottom</a></li>
            <li><a href="#" title="content_3" class="tab">Side Banner Top</a></li>
            <li><a href="#" title="content_4" class="tab">Main Ad</a></li>
        </ul>
        <div id="content_1" class="content">
            <table width="500" border="0" align="center" cellpadding="0" cellspacing="2" class="border">
                <tr>
                    <td align="center">
                      //some gridview here
                    </td>
                </tr>
            </table>
        </div>
        //similarly three more gridviews

jQuery:

 $(document).ready(function () {

     // When a link is clicked
     $("a.tab").click(function () {

        // switch all tabs off
        $(".active").removeClass("active");

        // switch this tab on
        $(this).addClass("active");

        // slide all content up
        $(".content").slideUp();

        // slide this content up
        var content_show = $(this).attr("title");
        $("#" + content_show).slideDown();

    });
});

ページをリロードした後でも、現在クリックされているタブを表示するにはどうすればよいですか?

4

2 に答える 2

1

タブがクリックされるたびに URL でハッシュタグを使用してみると、コードでハッシュタグが存在するかどうか、どのタブの ID がそれに対応しているかを確認できます。

<ul id="tabs">
    <li><a id="category1" href="#category1">Category 1</a></li>
    <li><a id="category2" href="#category2">Category 2</a></li>
    <li><a id="category3" href="#category3">Category 3</a></li>
</ul>

if(window.location.hash) {
    $(window.location.hash).click();
}

ベース: Jquery、URL の末尾のハッシュタグがクラス名と一致する場合にスクリプトをアクティブ化

于 2013-04-17T07:47:51.650 に答える