链接到另一个页面的jQuery选项卡 [英] Linking to jQuery tabs from another page
本文介绍了链接到另一个页面的jQuery选项卡的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
我使用下面的javascript将标签添加到我正在处理的页面的一部分（stridertechnologies.com/stoutwebsite/products.php）。我是javascript的新手，但是能说流利的html / css。
I added tabs to a section of a page I am working on (stridertechnologies.com/stoutwebsite/products.php)using the javascript below. I'm new to javascript, but fluent in html/css.
我想从主页链接到不同的标签，但我不知道该怎么做在html中带有id的锚名称之外，这似乎不适用于此。
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 id's in html and that doesn't seem to work with this.
似乎应该有一些非常简单的东西我可以添加来检测哪个他们点击链接并使其成为活动标签。这个网站应该在本周末上线，这是客户要求我做的唯一一件事。感谢您的帮助。
It seems like there should be something really simple I can add to detect which link they clicked on and make it the active tab. This site is supposed to go live this weekend, and this is the only thing the client has asked me to do. Thanks for the help.
编辑：上面链接的答案不起作用。
The answer linked above does not work.
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));
头标记中的脚本 -
script in head tag-
<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>
推荐答案
您可以传递网址中的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>
这篇关于链接到另一个页面的jQuery选项卡的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
