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

Question

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

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

似乎应该有一些非常简单的东西，我可以添加到我的 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));

Answer 1

此答案来自此处的重复问题: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。这应该取消选择默认的事件选项卡。EDIT2:focusTab有一个错误，它现在应该可以工作

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

删除顶部的第一个调用

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