Question

我正在构建一个使用JQuery在主页上创建选项卡式内容的应用程序。

我正在使用这个代码示例来构建。 http://jqueryfordesigners.com/jquery-tabs/

这一切都很好但是如何链接到标签，使其与点击主页或网站上任何内容中的标签链接相同？

我的Javascript代码。

$(document).ready(function(){
var tabContainers = $('div.tabs > div');

$('div.tabs ul.tabNavigation a').click(function () {
    tabContainers.hide().filter(this.hash).show();

    $('div.tabs ul.tabNavigation a').removeClass('selected');
    $(this).addClass('selected');

    return false;
}).filter(':first').click();

}）;

我的HTML。

    <div class="tabs">
  <!-- tabs -->
  <ul class="tabNavigation">
    <li><a href="#tab1">Tab 1</a></li>
    <li><a href="#tab2">Tab 2</a></li>
    <li><a href="#tab3">Tab 3</a></li>
    <li><a href="#tab4">Tab 4</a></li>
  </ul>

  <!-- tab containers -->
  <div id="tab1">
    ...
  </div>
  <div id="tab2">
    ...
  </div>
  <div id="tab3">
    ...
  </div>
  <div id="tab4">
    ...
  </div>
</div>

我以为我可以做点什么链接

<a href="#tab3">My link text</a>

在我的内容中，但我假设我需要对javascript代码进行相同的添加才能使其正常工作。

修改我已将以下代码添加到我的javascript中，但是我单击的选项卡未获得所选的css规则。

    // add code for links to tabs
$('a.tablink').click(function (){

    tabContainers.hide().filter(this.hash).show();

    $('div.tabs ul.tabNavigation a').removeClass('selected');
    $(this.hash).addClass('selected');

    return false;
})

我需要在这里更改什么 $（this.hash）.addClass（ '选择'）; 添加css类.selected

Answer 1

像

这样的东西

tabContainers.filter(window.location.hash).show();

在准备好的功能里面，也许吧？然后链接example.org/path#tab2将在pageload上打开正确的选项卡。

编辑：哦，我想我有点误解了这个问题。您是否也希望能够在同一页面上打开标签页？然后你可以使用trigger：

<a href="#tab3" onclick="$('#tab3').trigger('click');">My link text</a>

（实际上编写内联JavaScript非常难看，但如果您正在处理CMS，这可能是最简单的方法。）

Answer 2

也许这适用于在同一页面内进行链接。

var currentHash = document.location.hash;
$(window).bind('hashchange', function() {
    if(currentHash != document.location.hash){
        $("a[href*="+document.location.hash+"]").click();
        currentHash = document.location.hash;
    }
});

然后你可以通过这样的哈希链接到标签：

<a href="#tab-hash-here">Link Title</a>

从页面内容链接到JQuery选项卡

2 个答案: