从页面内容链接到JQuery选项卡 [英] Link to JQuery Tab from within page content

问题描述

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

I'm building an application that is using JQuery to created tabbed content on the homepage.

我正在使用此代码示例作为基础. http://jqueryfordesigners.com/jquery-tabs/

I'm using this example of code to build on. http://jqueryfordesigners.com/jquery-tabs/

这一切都很好，但是如何链接到选项卡，使其作用与单击主页或网站上任何内容中的选项卡式链接一样?

This all works great however how can I link to a tab so that it acts the same as clicking the tabbed links from within any content on the homepage or site?

我的Javascript代码.

My Javascript code.

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

我以为我可以做一些链接

I thought I could do something link

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

在我的内容中，但我假设我需要对javascript代码进行相同的添加才能使此功能生效.

in my content but I'm assuming i need to make same addition to the javascript code to make this work.

编辑 我已将以下代码添加到我的javascript中，但是我单击的选项卡未获得所选的CSS规则.

EDIT I'ved added the following code to my javascript however I the tab I clicked doesn't get the selected css rule.

    // 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('selected'); 添加CSS类.selected

What do I need to change here $(this.hash).addClass('selected'); to add the css class .selected

推荐答案

也许这可以在同一页面内进行链接.

Perhaps this will work for linking within the same page.

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

然后，您可以通过散列链接到标签，如下所示:

Then you can link to the tab via the hash like this:

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

这篇关于从页面内容链接到JQuery选项卡的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！