jQuery Tabs - 在页面重新加载时获取选定的选项卡

Question

我正在使用来自jqueryfromdesigners 的 jQuery Tabs 函数，但只有第一个示例适用于我。这是我使用的脚本代码：

    <script type="text/javascript" charset="utf-8">
$.noConflict();
        $(function () {
            var tabContainers = $('div.tabs > div');
            tabContainers.hide().filter(':first').show();

            $('div.tabs ul.tabNavigation a').click(function () {
                tabContainers.hide();
                tabContainers.filter(this.hash).show();
                $('div.tabs ul.tabNavigation a').removeClass('selected');
                $(this).addClass('selected');
                return false;
            }).filter(':first').click();
        });
    </script>

这是显示标签的演示代码：

<div class="tabs">
  <!-- tabs -->
  <ul class="tabNavigation">
    <li><a href="#first">Send a message</a></li>
    <li><a href="#second">Share a file</a></li>
    <li><a href="#third">Arrange a meetup</a></li>
  </ul>

  <!-- tab containers -->
  <div id="first">
    <p>Lorem ipsum dolor sit amet.</p>
  </div>
  <div id="second">
    <p>Sed do eiusmod tempor incididunt.</p>
  </div>
  <div id="third">
    <p>Ut enim ad minim veniam</p>
  </div>
</div>

我已经更改了代码供我使用。现在在 tab-content-divs 中显示了我通过 php 获取的信息。此内容中有许多链接，单击时会重新加载页面。

当用户单击#tab2 中的链接时，如何实现该页面重新加载并显示最后选择的#tab2？现在它总是显示#tab0...

我将不胜感激！

Answer 1

你可以和cookie一起使用

$( ".selector" ).tabs({ cookie: { expires: 30 } });

Answer 2

您需要在 URL 中添加一个哈希标签，在页面加载时您可以使用 window.location.hash 访问哈希。根据哈希标签，可以选择相应的标签

所以在你的情况下，一个简单的解决方法是

$(document).ready(function(){
     tabContainers.hide();
     tabContainers.filter(window.location.hash).show();
     $('div.tabs ul.tabNavigation a').removeClass('selected');
     return false;

});

Answer 3

再次感谢您的回复！

我尝试了几种变体，但都没有奏效......

如果我使用以下代码，我在单独的调用中在我的选项卡脚本下方实现了您的第一个代码，则不会发生任何事情：

    <script type="text/javascript" charset="utf-8">
$.noConflict();
        $(function () {
            var tabContainers = $('div.tabs > div');
            tabContainers.hide().filter(':first').show();

            $('div.tabs ul.tabNavigation a').click(function () {
                tabContainers.hide();
                tabContainers.filter(this.hash).show();
                $('div.tabs ul.tabNavigation a').removeClass('selected');
                $(this).addClass('selected');
                return false;
            }).filter(':first').click();
        });
    </script>
<script type="text/javascript" charset="utf-8">
$(document).ready(function(){
     tabContainers.hide();
     tabContainers.filter(window.location.hash).show();
     $('div.tabs ul.tabNavigation a').removeClass('selected');
     return false;

});
</script>

我选择一个标签（例如标签#3），点击一个链接，网站重新加载我仍然显示标签#1...

我试过的第二个版本：

    <script type="text/javascript" charset="utf-8">
$.noConflict();
        $(function () {
            var tabContainers = $('div.tabs > div');
            tabContainers.hide().filter(':first').show();

            $('div.tabs ul.tabNavigation a').click(function () {
                tabContainers.hide();
                tabContainers.filter(this.hash).show();
                $('div.tabs ul.tabNavigation a').removeClass('selected');
                $(this).addClass('selected');
                return false;
            }).filter(':first').click();
        });
    </script>
<script type="text/javascript" charset="utf-8">
$(document).ready(function(){
     tabContainers.hide();
     tabContainers.filter(window.location.hash).show();
     $('div.tabs ul.tabNavigation a').removeClass('selected');
     return false;

});
</script>

和以前一样，网站重新加载并显示 tab#1...

第三个版本的选项卡都是隐藏的，我首先需要点击一个选项卡让它显示出来...

    <script type="text/javascript" charset="utf-8">
$.noConflict();
        $(function () {
            var tabContainers = $('div.tabs > div');
            tabContainers.hide().filter(':first').show();

            $('div.tabs ul.tabNavigation a').click(function () {
                tabContainers.hide();
                tabContainers.filter(this.hash).show();
                $('div.tabs ul.tabNavigation a').removeClass('selected');
                $(this).addClass('selected');
                return false;
            }).filter(':first').click();


$(document).ready(function(){
     tabContainers.hide();
     tabContainers.filter(window.location.hash).show();
     $('div.tabs ul.tabNavigation a').removeClass('selected');
     return false;
});

});
</script>

点击并重新加载网站时，选项卡会再次隐藏...

如果你能再看看这个，那就太好了。我不知道该怎么做才能让它运行......

干杯！