jquery - 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

Thx again for your reply!

I tried several variations, but nothing worked...

If I use the following code, where I implemented the first code from you below my tab-script in a separate call nothing happens:

    <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>

I choose a tab (for example tab#3), click on a link, the site reloads I still get displayed tab#1...

2nd version I tried:

    <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>

Same as before, the site reloads and shows tab#1...

With the third version the tabs are all hidden, I first need to click on a tab to get it displayed...

    <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>

On click and site-reload the tabs are hidden again...

It would be great if you could take another look at this. I don't know what to do to get this running...

Cheers!

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

您可以与cookie一起使用

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