我使用下面的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));
脚本 -
<script type="text/javascript">
$(function() {
$(".tabs a").html5jTabs();
});
</script>
HTML -
<div id="tabwrapper" class="grid_12">
<div class="tabs">
<a data-toggle="tile">Tile</a>
<a data-toggle="metal">Metal</a>
<a data-toggle="shingle">Shingle</a>
<a data-toggle="flat">Flat</a>
<a data-toggle="custom">Custom Projects</a>
</div>
<div class="tabContent">
<div id="tile" class="content_tab grid_12">
<h2>Brands of Tile Roofing Offered</h2>
<p>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.</p>
<div class="grid_6 alpha omega logocontainer">
<a class="logo" target="_blank" href="http://www.boralna.com/rooftiles/rooftiles.asp"><img src="products/borallogo.jpg" alt="Boral Logo" title="Boral Logo" /></a>
</div>
<div class="grid_6 alpha omega logocontainer">
<a class="logo" target="_blank" href="http://www.eagleroofing.com/"><img src="products/eaglelogo.gif" alt="Eagle standard" title="Eagle standard" /></a>
</div>
</div>
<div id="metal" class="content_tab grid_12">
<h2>Brands of Metal Roofing Offered</h2>
<p>Many different types of Custom Metal Roof systems are available. </p>
<div class="grid_4 alpha omega logocontainer">
<a class="logo" target="_blank" href="http://www.fabral.com/"><img src="products/fabrallogo.png" alt="Fabral Logo" title="Fabral Roofing" /></a>
<a class="logo" target="_blank" href="http://www.ascbp.com/
"><img src="products/asclogo.png" alt="ASC Logo" title="ASC Roofing Products" /></a>
</div>
<div class="grid_8 alpha omega logocontainer">
<a class="logo" target="_blank" href="http://firestonebpco.com/roofing/metal-roofing-systems/"><img src="products/firestonelogo.jpg" alt="Firestone Logo" title="Firestone" /></a>
</div>
</div>
<div id="shingle" class="content_tab grid_12">
<h2>Brands of Shingles Offered</h2>
<p>Many different types of Shingle Roofing are available. The brands listed here are a few of main brands of Shingles used in Southern Utah. </p>
<div class="grid_4 alpha omega logocontainer">
<a class="logo" target="_blank" href="http://www.gaf.com/"><img src="products/gaflogo.jpg" alt="GAF Logo" title="GAF Materials Corporation" /></a>
<a class="logo" target="_blank" href="http://www.certainteed.com/"><img src="products/certainteedlogo.jpg" alt="Certainteed Logo" title="Certainteed Roofing" /></a>
</div>
<div class="grid_4 alpha omega logocontainer">
<a class="logo" target="_blank" href="http://www.pabcoroofing.com/
"><img src="products/pabcologo.png" alt="Pabco Logo" title="Pabco" /></a>
<a class="logo" target="_blank" href="http://www.owenscorning.com/"><img src="products/owenscorninglogo.jpg" alt="Owens Logo" title="Owens Corning" /></a>
</div>
<div class="grid_4 alpha omega logocontainer">
<a class="logo" target="_blank" href="http://www.tamko.com/"><img src="products/tamko.gif" alt="Tamko Logo" title="Tamko Roofing Products" /></a>
</div>
</div>
<div id="flat" class="content_tab grid_12">
<h2>Brands of Flat Roofing Offered</h2>
<p>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.</p>
<div class="grid_4 alpha omega logocontainer">
<a class="logo" target="_blank" href="http://www.durolast.com/"><img src="products/durolast.jpg" alt="Duro-Last Logo" title="Duro-Last Roofing Inc." /></a>
<a class="logo" target="_blank" href="http://www.versico.com/"><img src="products/versicologo.jpg" alt="Versico Logo" title="Versico" /></a>
</div>
<div class="grid_4 alpha omega logocontainer">
<a class="logo" target="_blank" href="http://www.specjm.com/commercial/roofing.asp"><img src="products/johnsmanville.jpg" alt="Johns Manville Logo" title="Johns Manville" /></a>
<a class="logo" target="_blank" href="http://www.ibroof.com/"><img src="products/iblogo.jpg" alt="IB Logo" title="IB Roof Systems" /></a>
</div>
<div class="grid_4 alpha omega logocontainer">
<a class="logo" target="_blank" href="http://www.weatherbondroofing.com/"><img src="products/weatherbondlogo.jpg" alt="Weatherbond Logo" title="Weatherbond" /></a>
</div>
</div>
<div id="custom" class="content_tab grid_12">
<h2>Custom Roofing Options</h2>
<p>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.</p>
<div class="grid_6 alpha omega logocontainer">
<a class="logo" target="_blank" href="http://www.classicmetalroofingsystems.com/"><img src="products/classiclogo.png" alt="Classic Metals Logo" title="Classic Metals" /></a>
</div>
<div class="grid_6 alpha omega logocontainer">
<a class="logo" target="_blank" href="http://www.decra.com/"><img src="products/decralogo.jpg" alt="Decra Logo" title="Decra" /></a>
</div>
</div>
</div>
</div>
答案 0 :(得分：0)
您可以从链接中传递网址中的tab 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>