Question

我有以下代码：fiddle，如何设置它以便我可以将URL添加到不同的选项卡，我已尝试将标签ID添加到网址，但这不起作用。我也尝试了锚点，这不起作用，任何帮助赞赏。

Answer 1

您必须通过绑定点击事件手动触发标签切换功能。

HTML：

<ul id="tabs">

      <li><a href="#tab1">test1</a></li>
      <li><a href="#tab2">test2</a></li>
      <li><a href="#tab3">test3</a></li>
      <li><a href="#tab4">test4</a></li>

</ul>

<span class="tablink" data-href="#tab1">link</span>

JS：

$('.tablink').click(function(){
   $('a[href="'+$(this).attr('data-href')+'"]').click();
});

此链接的工作方式就像您点击了标签一样。

它会找到激活您的标签的链接，并触发它的点击事件。

编辑以适合提问者的HTML

Answer 2

你可以很容易地做到这一点。由于您的列表与外观顺序对应于标签，您不需要ID，您可以这样做：

HTML

<ul id="tabs">
    <li><a href="http://domain.com/#tab1">test1</a></li>
</ul>

<div>
      <div class="container">Some content1</div>
</div>

的JavaScript

var tabs = $('#tabs a');
var content = $('.container');
var current = 0;

tabs.click( function(event) {
    // get which element was clicked
    var pos = tabs.index ($(event.target) );
    // remove current active class
    tabs.eq(current).removeClass('active');
    // fade out current element
    content.eq(current).fadeOut( function() {
        //afterwards set current to selected, update class and fade in content
        current = pos;
        tabs.eq(current).addClass('active');
        content.eq( current ).fadeIn();
        // append hash to url
        window.location.hash = tabs.eq(current).attr('href');
    });

    event.preventDefault();
});

这是将锚添加到网址的行：

window.location.hash = tabs.eq(current).attr('href');

请注意，这在小提琴中不起作用。或者你可以把这一行留下来，并像我在上面的源代码中那样添加真实的网址。

我还优化了你的代码，以便使用更少的选择器，而且它更短。它还为当前元素使用单个类active（而不是将类应用于所有inactive元素）。你只需要调整你的风格。

我还添加了一些CSS，它默认显示第一个元素，并隐藏所有其他元素 - 不需要JavaScript：

.container {
    display:none;
}

.container:first-child {
    display:block;
}

小提琴

http://jsfiddle.net/insertusernamehere/hCWMj/

jQuery链接选项卡式内容

2 个答案:

HTML

的JavaScript

小提琴