如何使这些 Jquery 选项卡可以通过 ahref 链接

How to make these Jquery tabs linkable through ahref?

本文关键字：可以通过 ahref 链接 选项 何使这 Jquery      更新时间：2023-09-26

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

我正在运行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/

您可以使用

window.location.hash检查URL哈希

例如，将其集成到代码中的最简单方法是将 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，请确保禁用自动滚动。

这里的关键是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/

相关文章：