如何用jtabs链接到标签？ [英] How to link to tabs with jtabs?

问题描述

我使用本网站上的步骤将标签添加到我正在处理的页面的一部分（stridertechnologies.com/stoutwebsite/products.php）： http://code-tricks.com/create-a-simple-html5-tabs-using-jquery/

I added tabs to a section of my page I am working on (stridertechnologies.com/stoutwebsite/products.php)using the steps found at this website: http://code-tricks.com/create-a-simple-html5-tabs-using-jquery/

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

I want to link to the different tabs from the home page, but I am not sure how to do that outside of anchor names with html and that doesn't work with this, and there aren't any instructions on how to do it on the site.

似乎应该有一些非常简单的东西我可以添加到我的javascript来检测哪个他们点击链接并使其成为活动标签。

It seems like there should be something really simple I can add to my javascript to detect which link they clicked on and make it the active tab.

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 。

This answer is from a duplicated question here: https://stackoverflow.com/a/20811416/3123649.

您可以从链接中传递url中的tab div id并使用它来选择。

You could pass the tab div id in the url from the link and use that to select.

index.html的主页链接：

Home page links from index.html:

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

将此javascript添加到标签页

Add this javascript to the tab page

<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 有错误，现在应该可以使用

Replace the original focusTab function with the edit. Also add the extend function attrNameStart. This should deselect the default active tab. focusTab had a bug, it should work now

**我查看了你的网站我的解决方案似乎对你有用。有一点我注意到了。您初始化 html5jTabs（）两次。

** I looked at your site and my solutions seems to be working for you. One thing I noticed. You initialize the html5jTabs() twice.

删除顶部的第一个电话

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

这篇关于如何用jtabs链接到标签？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！