Javascript 使用第一个jQuery CSS选项卡中的链接访问第三个选项卡，并防止在页面刷新时切换选项卡

我正在使用jQuery创建一个选项卡列表；当点击4个选项卡中的一个时，它会将您带到隐藏div中的内容。当然，有4个隐藏div，每个选项卡一个

不幸的是，我是一个jQueryNoob，尽管有几件事我很想去做，但我还不具备这样做的技能。因此，你们这些访问stackoverflow的人是我唯一的希望。这两个目标都能实现吗？如果是，请告诉我

使用第一个选项卡中的链接访问第三个选项卡。就像这样：转到表3。但这不起作用。我猜 应该有一个函数，类似于： onClick=goToThatDiv

在选项卡2上，如果刷新，页面将重新加载选项卡1，如下所示 第一个选项卡的类为：current。有没有其他的办法 即使在刷新页面后仍保持在第二个选项卡上

以下是代码的要点：

HTML

---

是的，两者都有可能

第1点的解决方案

最初可以隐藏所有选项卡内容，当然第一个选项卡除外。 然后，当您单击任何一个选项卡时，检查其数据选项卡是否与相应的选项卡id匹配。使用if-else进行此操作。 如果您想要一个链接来执行此操作，请为其提供相同的数据选项卡和相同的onClick侦听器。 现在，如果它们匹配，则从具有该类的选项卡中删除当前类，并将其添加到新选项卡中，该选项卡的数据选项卡与所需选项卡内容的选项卡id匹配。 隐藏所有选项卡内容，仅显示类为当前的选项卡内容 第2点的解决办法

单击选项卡时，按如下所示更改窗口的位置

var href=$this.data'tab'； window.location.hash=href

这将作为选项卡内容的url

然后，当您重新加载页面时，请注意页面上的所有内容都重置为初始状态，但哈希保持一致

现在检查与url中存储的哈希匹配的选项卡内容，如下所示

$'.tab link'.eachfunction{ var hash=window.location.hash； var href=$this.data'tab'； ifhash==href { //将当前选项卡的类设置为当前 //隐藏所有选项卡内容并仅显示当前选项卡的内容 } };

一开始这可能会让人望而生畏，但一旦你理解了它，这就相当简单了

参考文献

---

请给我打电话。我不确定为什么需要这个功能。您必须使用cookie或本地存储，否则其他用户将无法获得正确的体验。是的，很抱歉。谢谢你的快速回复。关于第一个解决方案，如果可能的话，你能不能再沉默一点。哦\如果你想显示一个显示第三个标签内容的链接，你可以复制li标签，然后粘贴到你想要的地方。这将工作，如果你有标签工作正常啊哈！是的，这确实有效；某种程度上。但是根据你的第一个解决方案，你愿意为这个新手填写问号吗？如果你想看看我是怎么做到的，看看我的网站。在这里，左下角的所有三个部分都将充当选项卡，而右边的内容将充当选项卡内容。因此，当您单击左下角的任何链接时，所有内容都将消失，只显示相关内容。研究myScript.js文件，如果有任何帮助，请标记这个答案：谢谢。这很有帮助。检查了代码笔，它确实有效。最后一个问题。当点击到第三个标签的链接时，在到达第三个标签后，是否仍然可以像直接点击第三个标签那样突出显示该标签？

<!-- BEGINNING OF TABS DIV-->
<div id="tab_container">

        <!-- BEGINNING OF Tab list-->
        <ul class="tabs">
            <li class="tab-link current" data-tab="tab-1">Tab 1</li>
            <li class="tab-link" data-tab="tab-2">Tab 2</li>
            <li class="tab-link" data-tab="tab-3">Tab 3</li>
            <li class="tab-link" data-tab="tab-4">Tab 4</li>
        </ul>
        <!-- END OF Tab list-->



   <div id="tab-1" class="tab-content current"><!-- BEGINNING OF CURRENT DIV-->
      // Tab 1 Content goes here.
        <a href=" // link to the 3rd tab "> To the 3rd Tab </a>
        <a href=" // link to the 4th tab "> To the 4th Tab </a>
   </div> <!-- END OF CURRENT DIV-->


   <div id="tab-2" class="tab-content"><!-- BEGINNING OF 2nd DIV-->
      // Tab 2 Content goes here.
   </div> <!-- END OF 2nd DIV-->


   <div id="tab-3" class="tab-content"><!-- BEGINNING OF 3rd DIV-->
      // Tab 3 Content here.
   </div> <!-- END OF 3rd DIV-->


   <div id="tab-4" class="tab-content"><!-- BEGINNING OF 4th DIV-->
      // Tab 4 Content here.
   </div> <!-- END OF 4th DIV-->


</div><!-- END OF TABS DIV-->    

<script>
$(document).ready(function(){

    $('ul.tabs li').click(function(){
        var tab_id = $(this).attr('data-tab');

        $('ul.tabs li').removeClass('current');
        $('.tab-content').removeClass('current');

        $(this).addClass('current');
        $("#"+tab_id).addClass('current');
    })

})
</script>

/*****************Tabs CSS**********************/


        ul.tabs{

            list-style: none;
        }
        ul.tabs li{
            background:black;
            display: inline-block;

        }

        ul.tabs li:hover {
            background: blue;

        }

        ul.tabs li.current{
            background: green;

        }

        .tab-content{
            display: none;

        }

        .tab-content.current{
            display: inherit;
        }

/*****************End of Tabs CSS**********************/