jQuery选项卡不记得新页面加载时最后打开的选项卡

Question

I'm using JS for some simple Jquery tabs, which I use as a main vertical navigation bar on my website in development. 我将JS用于一些简单的Jquery标签，这些标签用作开发中我网站上的主要垂直导航栏。

I have two main tabs, 'tab 1' (left hand side) and 'tab 2' (right hand side). 我有两个主要标签，“标签1”（左侧）和“标签2”（右侧）。 On each of these tabs there are sub links that link to various pages of the website. 在每个选项卡上，都有子链接可链接到网站的各个页面。

So my problem is that whenever I click on a link from 'tab 2', when that new page loads, the navigation bar with revert to 'tab 1' as default. 所以我的问题是，每当我单击“选项卡2”中的链接时，当加载新页面时，默认情况下导航栏将恢复为“选项卡1”。

I would like it so that any links I click on from 'tab 2', have the navigation bar defaulting to that 'tab 2' on load. 我希望它使我从“选项卡2”单击的任何链接都具有默认的导航栏，在加载时为该“选项卡2”。

My JS is here: 我的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;
});});

Any help would be gratefully recieved. 任何帮助将不胜感激。

Here is the HTML: 这是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

Well, a new page load happens, so the tabs reinitialize from scratch. 好吧，新的页面加载发生了，因此选项卡从头开始重新初始化。 You're going to have to pass the selected tab between pages somehow - either in the URL as a fragment or parameter, or in a cookie, and then read the value back and use it when you initialize the tabs. 您将必须以某种方式在页面之间传递选定的选项卡-在URL中作为片段或参数，或者在Cookie中传递，然后读回该值并在初始化选项卡时使用它。

Answer 2

on each page, you can add some attribute or something that uniquely identifies that page, like <body id="contact"> . 在每个页面上，您可以添加一些属性或可以唯一标识该页面的属性，例如<body id="contact"> 。

Alter your js where it says to add the active class based on the body id 更改您的js，根据主体ID添加活动类

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

Answer 3

You could change this line 您可以更改此行

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

to 至

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

and in your html just add class="active" to the li 并在您的html中将class =“ active”添加到li

<li class="active">

jQuery选项卡不记得新页面加载时最后打开的选项卡

问题描述

3 个解决方案

解决方案1
1 2013-03-22 22:50:06

解决方案2
0 2013-03-22 22:53:44

解决方案3
0 已采纳 2013-03-23 03:49:44

jQuery选项卡不记得新页面加载时最后打开的选项卡

问题描述

3 个解决方案

解决方案1 1 2013-03-22 22:50:06

解决方案2 0 2013-03-22 22:53:44

解决方案3 0 已采纳 2013-03-23 03:49:44

解决方案1
1 2013-03-22 22:50:06

解决方案2
0 2013-03-22 22:53:44

解决方案3
0 已采纳 2013-03-23 03:49:44