链接到另一个页面的jQuery选项卡

我使用下面的javascript将标签添加到我正在处理的页面的一部分(stridertechnologies.com/stoutwebsite/products.php)。 我是javascript的新手,但是能说流利的html / css。

我想链接到主页上的不同选项卡,但是我不知道如何在html中使用带有id的锚名称之外这样做,这似乎不适用于此。

似乎应该有一些非常简单的东西我可以添加以检测他们点击了哪个链接并使其成为活动标签。 这个网站应该在本周末上线,这是客户要求我做的唯一一件事。 谢谢您的帮助。

编辑:上面链接的答案不起作用。

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)); 

头标记中的脚本 –

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

HTML的

  

Brands of Tile Roofing Offered

We offer many different types of Tile Roofing. These brands listed here are a few of main brands of Tile used in Southern Utah. Tile roofing is becoming more popular here in Southern Utah, and the majority of newly built homes have tile roofs.

Brands of Metal Roofing Offered

Many different types of Custom Metal Roof systems are available.

Brands of Shingles Offered

Many different types of Shingle Roofing are available. The brands listed here are a few of main brands of Shingles used in Southern Utah.

Brands of Flat Roofing Offered

As with all the other roofing types, there are many different types of Flat Roof systems. The brands listed here are a few of main Flat roof systems we use.

Custom Roofing Options

At Stout Roofing, we are able to create any custom design to match your dream home or business. Visit our Project Gallery to see some examples.

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

index.html的主页链接:

 tile metal 

将此javascript添加到标签页

  

编辑:用编辑替换原始的focusTabfunction。 还要添加扩展函数attrNameStart 。 这应该取消选择默认的活动选项卡。 EDIT2: focusTab有一个bug,现在应该可以了

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

删除顶部的第一个电话