如何使用 jtabs 链接到选项卡？

我使用此网站上找到的步骤将选项卡添加到我正在处理的页面的一部分 (stridertechnologies.com/stoutwebsite/products.php)：http://code-tricks.com/create-a-simple-html5-tabs-using-jquery/ http://code-tricks.com/create-a-simple-html5-tabs-using-jquery/

我想从主页链接到不同的选项卡，但我不确定如何使用 html 在锚点名称之外执行此操作，并且这不适用于此，并且没有任何关于如何执行此操作的说明网站。

看起来应该有一些非常简单的东西，我可以添加到我的 javascript 中来检测他们单击的链接并使其成为活动选项卡。

javascript:

;(function($){
  $.fn.html5jTabs = function(options){
    return this.each(function(index, value){
      var obj = $(this),
      objFirst = obj.eq(index),
      objNotFirst = obj.not(objFirst);

      $("#" +  objNotFirst.attr("data-toggle")).hide();
      $(this).eq(index).addClass("active");

      obj.click(function(evt){

        toggler = "#" + obj.attr("data-toggle");
        togglerRest = $(toggler).parent().find("div");

        togglerRest.hide().removeClass("active");
        $(toggler).show().addClass("active");

        //toggle Active Class on tab buttons
        $(this).parent("div").find("a").removeClass("active");
        $(this).addClass("active");

        return false; //Stop event Bubbling and PreventDefault
      });
    });
  };
}(jQuery));

这个答案来自一个重复的问题：https://stackoverflow.com/a/20811416/3123649 https://stackoverflow.com/a/20811416/3123649.

您可以从链接的 url 中传递选项卡 div id 并使用它进行选择。

来自index.html的主页链接：

<a href="products.php?tabId=tile">tile</a>
<a href="products.php?tabId=metal">metal</a>

将此 javascript 添加到标签页

<script type="text/javascript">
// To get parameter from url
function getParameterByName(name) {
    name = name.replace(/[\[]/, "\\\[").replace(/[\]]/, "\\\]");
    var regex = new RegExp("[\\?&]" + name + "=([^&#]*)"),
    results = regex.exec(location.search);
    return results == null ? "" : decodeURIComponent(results[1].replace(/\+/g, " "));
}

    $.extend($.expr[':'], {
    attrNameStart: function (el, i, props) {
        var hasAttribute = false;
        $.each(el.attributes, function (i, attr) {
            if (attr.name.indexOf(props[3]) !== -1) {
                hasAttribute = true;
                return false;
            }
        });


        return hasAttribute;
    }
});

// deselect tabs and select the tab by id
function focusTab(id) {
    $("#tile").hide().removeClass("active");
    $("#metal").hide().removeClass("active");
    $("#shingle").hide().removeClass("active");
    $("#flat").hide().removeClass("active");
    $("#custom").hide().removeClass("active");
    var toggle = $(id).parent().find("div");
    toggle.hide().removeClass("active");
    $('a:attrNameStart(data-toggle)').removeClass("active");
    var id1 = getParameterByName("tabId");
    var toggler = $('*[data-toggle=' + id1 + ']');        
    $(toggler).addClass("active");        
    $(id).show().addClass("active");
}

 $(function() {
    $(".tabs a").html5jTabs();

    // Get the tab id from the url
    var tabId = "#" + getParameterByName("tabId");
    // Focus the tab       
    focusTab(tabId);
});
</script>

编辑：替换原来的focusTab具有编辑功能。还添加扩展功能attrNameStart。这应该取消选择默认的活动选项卡。 编辑2：focusTab有一个错误，现在应该可以工作了

** 我查看了您的网站，我的解决方案似乎对您有用。我注意到一件事。您初始化html5jTabs() twice.

删除顶部的第一个调用

<script type="text/javascript">
    $(function() {
        $(".tabs a").html5jTabs();
    });
</script>