1

我将 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">ご利用案内&lt;/a></li>
                </ul>
                <div class="tab-container">
                    <div id="tab1" class="tab-content">
                        <ul>
                            <li>
                            <a href="/a.php">転送サービス&lt;/a>                                
                            <a href="/b.php">お買い物サービス</a>   
                                <ul>
                                    <li><a href="/b1.php">卸売・仕入れサポート</a></li>
                                    <li><a href="/b2.php">国際展示会サポート&lt;/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">サービスの流れ&lt;/a></li>
                                </ul>
                            </li>
                            <li><a href="/d.php">料金ガイド&lt;/a>
                                <ul>
                                    <li><a href="/d1.php">手数料について&lt;/a></li>
                                    <li><a href="/d2.php">換算レート&lt;/a></li>
                                </ul>
                            </li>                               
                        </ul>
                    </div>
                </div>
            </div>
4

3 回答 3

1

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

于 2013-03-22T22:50:06.480 回答
0

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

改变你的 js，它说根据 body id 添加活动类

  $("ul.tabs li."+$('body').attr('id')).addClass("active").show();
于 2013-03-22T22:53:44.720 回答
0

你可以改变这一行 

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

到

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

并在您的 html 中添加class="active"到 li

<li class="active">
于 2013-03-23T03:49:44.560 回答