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-div中现在显示我通过php获取的信息。此内容中有许多链接，在单击时重新加载页面。

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

我很感激任何暗示！

Answer 1

您需要使用网址添加哈希标记，并且在页面加载时，您可以使用window.location.hash访问哈希。根据哈希标记，您可以选择相应的选项卡

所以在你的情况下，一个简单的woraround就是

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

});

Answer 2

您可以使用cookie

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

Answer 3

再次感谢您的回复！

我尝试了几种变体，但没有任何效果......

如果我使用下面的代码，我在单独的调用中在我的tab-script下面实现了第一个代码，没有任何反应：

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

与之前相同，网站重新加载并显示标签＃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>

在点击和网站重新加载时，标签会再次隐藏......

如果你能再看看这个会很棒。我不知道该怎么办才能让它运转起来......

干杯！

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

3 个答案: