如何为tabs javascript创建链接

Question

嘿，我不知道如何在浏览器内为标签页做链接，而不是改变网址的位置，而是进入标签页。更改选项卡的方式是使用以下代码：

<a href="#tab-1">Tab One</a>
<a href="#tab-2">Tab Two</a>
<a href="#tab-3">Tab Three</a>

我想做一个javascript调用，这将使我能够做到这一点。这是我尝试过的，但它改变了url定位，添加了一个位置。代码如下：

window.location.assign("#tab-3")

如何使用javascript制作我的链接？

Answer 1

有许多框架支持选项卡，使用其中一种最适合您。这里有一个很好的例子：http://jqueryui.com/tabs/。

如果你想使用你自己的，我强烈推荐这个教程，它只使用CSS (不需要JavaScript！)：http://css-tricks.com/functional-css-tabs-revisited/。

最好避免给窗口赋值，因为这会快速消耗内存并污染所谓的“全局作用域”。只是在未来。

Answer 2

通过使用Jquery，您可以通过使用CSS display来制作选项卡。在其中一个可见时隐藏所有内容，并设置display:inherit以显示用户单击的内容。

Jquery example

HTML

<span id="showtab1">Tab 1</span>
<span id="showtab2">Tab 2</span>
<div id="tab1" class="tab">
    tab1
</div>
<div id="tab2" class="tab">
    tab2
</div>

Jquery

$("#showtab1").click(function(){
        $("#tab1").css("display","inherit");
        $("#tab2").css("display","none");
    });
    $("#showtab2").click(function(){
        $("#tab2").css("display","inherit");
        $("#tab1").css("display","none");
    });