如何直接链接到jQuery手风琴选项卡

时间:2012-07-04 17:38:40

标签: javascript jquery accordion

我有一个wordpress主题,其中包含用于创建选项卡式界面的短代码构建。问题是我无法从外部页面链接到特定选项卡。我看到有关同一问题有多个问题,但没有答案对我有用。我必须提到我的javascript / jQuery技能接近零,所以即使这看起来很简单,我也不知道该怎么做。

我发现jQuery代码负责我主题文件中的accordion选项卡,这里是:

// ---------------------------------------
// TAB
// ---------------------------------------
function base_tab() {
$('.tabs-wrap').each(function(){
    var tab_group = $('.tabs-wrap');
    $('.tabs li', tab_group).click(function(e){
        e.preventDefault();
        $('.tabs a', tab_group).removeClass('current');
        $('a', this).addClass('current');

        $('.panes .pane', tab_group).hide();
        $('.panes .pane', tab_group).eq($(this).index()).show();
    });

    // Trigger Initial Tab
    var initial_tab = parseInt( $('.tabs', this).attr('initial-tab') );
    $('.tabs li', tab_group).eq(initial_tab).trigger('click');
});
}

据我之前所理解,类似的问题我需要添加此代码,但我无法弄清楚我自己在哪里以及如何使其工作:

$(window.location.hash).click();

标签的所有链接目前都是这样的:http://www.websitename.com/page/#

我会感激任何帮助,谢谢!

1 个答案:

答案 0 :(得分:1)

首先将您的HTML更改为此

<ul class="tabs" initial-tab="0">
   <li><a href="#all">All</a></li>
   <li><a href="#kids">Kids Place &#8211; Kidproof</a></li>
   <li><a href="#baby">Baby Rattle Toy</a></li>
   <li><a href="#kidsvideo">Kids Place Video Player</a></li>
   <li><a href="#letter">Letters With Ally</a></li>
   <li><a href="#mommy">Mommy bird and her chick</a></li>
</ul>

然后写一些额外的代码

$(function(){
   var hash = window.location.hash;
   var anchor = $('a[href$="'+hash+'"]');
   if (anchor.length > 0){
      anchor.click();
   }
});