Question

我正在使用JS作为一些简单的Jquery选项卡，我在开发中使用它作为我的网站上的主要垂直导航栏。

我有两个主要标签，'标签1'（左侧）和'标签2'（右侧）。在每个选项卡上都有链接到网站各个页面的子链接。

所以我的问题是每当我点击“标签2”中的链接时，当加载新页面时，导航栏会恢复为“标签1”作为默认值。

我希望它能让我从“标签2”点击的任何链接，导航栏在加载时默认为“标签2”。

我的JS在这里：

$(document).ready(function() {

$(".tab-content").hide();                           
$("ul.tabs li:first").addClass("active").show();    
$(".tab-content:first").show();                     
$("ul.tabs li").click(function() {                  
    $("ul.tabs li").removeClass("active");          
    $(this).addClass("active");                     
    $(".tab-content").hide();                       
    var activeTab = $(this).find("a").attr("href"); 
    $(activeTab).fadeIn();                          
    return false;
});});

任何帮助都会感激不尽。

这是HTML：

<!-- START TABS -->

            <div class="tabbz">
                <ul class="tabs">
                    <li><a href="#tab1">サービス内容</a></li>
                    <li class="active"><a href="#tab2">ご利用案内</a></li>
                </ul>
                <div class="tab-container">
                    <div id="tab1" class="tab-content">
                        <ul>
                            <li>
                            <a href="/a.php">転送サービス</a>                                
                            <a href="/b.php">お買い物サービス</a>   
                                <ul>
                                    <li><a href="/b1.php">卸売・仕入れサポート</a></li>
                                    <li><a href="/b2.php">国際展示会サポート</a></li>
                                </ul>
                            </li>
                        </ul>
                    </div>

                    <div id="tab2" class="tab-content">
                        <ul>
                            <li><a href="/c.php">ご利用ガイド</a>
                                <ul>
                                    <li><a href="/c1.php">個人輸入とは</a></li>
                                    <li><a href="/c2.php">サービスの流れ</a></li>
                                </ul>
                            </li>
                            <li><a href="/d.php">料金ガイド</a>
                                <ul>
                                    <li><a href="/d1.php">手数料について</a></li>
                                    <li><a href="/d2.php">換算レート</a></li>
                                </ul>
                            </li>                               
                        </ul>
                    </div>
                </div>
            </div>

Answer 1

好吧，会发生新的页面加载，因此标签会从头开始重新初始化。您将不得不以某种方式在页面之间传递选定的选项卡 - 在URL中作为片段或参数，或在cookie中，然后读取值并在初始化选项卡时使用它。

Answer 2

在每个页面上，您可以添加一些唯一标识该页面的属性或内容，例如<body id="contact">。

根据正文ID

更改你的js所说的添加活动类的位置

  $("ul.tabs li."+$('body').attr('id')).addClass("active").show();

Answer 3

您可以更改此行

$("ul.tabs li:first").addClass("active").show();

到

$("ul.tabs li.active").show();

并在您的HTML中只需将 class =“active”添加到li

<li class="active">

Jquery选项卡不记得新页面加载时的上次打开选项卡

3 个答案: