Question

我一直在努力解决这个问题 - 所以请放心，我在耗尽了所有有限的能力后来到这里。无论如何我都不是程序员，但我已经尝试过......

我正在运行WordPress并使用具有自定义标签的主题。

我希望能够使用ahref代码链接到选项卡。例如。 www.test.com/page/#tab2并打开第二个标签。

以下是HTML代码：

 <div class="short-tabs">
 <ul style="border-bottom: 1px solid #dbd6d6;">
<li><a href="">Best Food Processors</a></li>
<li><a href="">Buying Guide</a></li>
 </ul>
 <div style="border: none;">
 this is tab1
 </div>
 <div style="border: none;">
 this is tab2
 </div>
 </div>

以下是与之对应的JQUERY代码：

    // Tabbed blocks
    jQuery(".short-tabs").each(function () {
        var thisel = jQuery(this);
        thisel.children("div").eq(0).addClass("active");
        thisel.children("ul").children("li").eq(0).addClass("active");
    });

    jQuery(".short-tabs > ul > li a").click(function () {
        var thisel = jQuery(this).parent();
        thisel.siblings(".active").removeClass("active");
        thisel.addClass("active");
        thisel.parent().siblings("div.active").removeClass("active");
        thisel.parent().siblings("div").eq(thisel.index()).addClass("active");
        return false;
    });

我不知道如何编辑它以允许链接到选项卡和从选项卡链接。正如您从HTML中看到的，我甚至不需要链接到＃tab1，例如它们可以工作。

任何可以提供帮助的想法或专家？：）

JSFIDDLE链接： http://jsfiddle.net/cws1j0q7/2/

Answer 1

您可以使用window.location.hash

检查网址哈希

例如，将此功能集成到代码中的最简单方法是将 href 添加到您的链接

<ul style="border-bottom: 1px solid #dbd6d6;">
     <li>
        <a href="#tab1">Best Food Processors</a>
     </li>
     <li>
        <a href="#tab2">Buying Guide</a>
     </li>
</ul>

检查网址是否有哈希并触发点击

if(window.location.hash){
    $('a[href=' + window.location.hash + ']').trigger('click');
}

您还可以设置data- *属性或ID并进行检查。如果您选择设置ID，请确保禁用自动滚动。

Answer 2

此处的关键是window.location.hash

jQuery(".short-tabs").each(function () {
    var thisel = jQuery(this);
    thisel.children("div").eq(0).addClass("active");
    thisel.children("ul").children("li").eq(0).addClass("active");
});

jQuery(".short-tabs > ul > li a").click(function () {
    selectTab(this);
    return false;
});

jQuery("a").click(function () {
    processHash( '#' + jQuery(this).prop('href').split("#")[1] );
});

function selectTab($a) {
    var $li = jQuery($a).parent();
    $li.siblings(".active").removeClass("active");
    $li.addClass("active");
    $li.parent().siblings("div.active").removeClass("active");
    $li.parent().siblings("div").eq($li.index()).addClass("active");
}

function processHash(hash) {
    var $a = jQuery('.short-tabs a[href="' + hash + '"]');
    selectTab( $a );
}

if ( window.location.hash ) {
    processHash();
}

http://jsfiddle.net/cws1j0q7/7/

如何通过href使这些Jquery选项卡可单击？

2 个答案: