如何根据我所在的页面在 Jquery 中创建活动选项卡效果？
有许多教程向您展示如何通过从 url 获取 # 来在导航栏中创建活动选项卡效果。
如果您链接到同一页面，这很好，但如果所有链接都在不同页面上怎么办？有没有办法使用 Jquery 获取 url 并使选项卡处于活动状态？
以下示例为特定选项卡提供了“活动”类：
var tabs = $('ul.tabs');
tabs.each(function(i) {
//Get all tabs
var tab = $(this).find('> li > a');
tab.click(function(e) {
//Get Location of tab's content
var contentLocation = $(this).attr('href') + "Tab";
//Let go if not a hashed one
if(contentLocation.charAt(0)=="#") {
e.preventDefault();
//Make Tab Active
tab.removeClass('active');
$(this).addClass('active');
//Show Tab Content & add active class
$(contentLocation).show().addClass('active').siblings().hide().removeClass('active');
}
});
如何修改它以与指向我网站内其他页面的链接一起使用？这是 html：
<ul id="nav" class="tabs">
<li><a href="/" title="Home" class="active">Home</a></li>
<li><a href="/about/" title="About us">About</a></li>
<li><a href="/demo/" title="Demo">Demo</a></li>
<li><a href="/where/" class="dir" title="Where">Where</a></li>
<li><a href="/contact/" class="dir" title="Contact Us">Contact Us</a></li>
</ul>
上面的 jquery 仅适用于 #tab1、#tab2 等，如何根据当前页面名称使选项卡处于活动状态？抱歉，如果这有点不清楚，这很难解释！
There are many tutorials that show you how to create an active tab effect in a navigation bar by fetching the # from the url.
This is great if you are linking to the same page, but what if all your links are on different pages. Is there a way using Jquery to fetch the url and make the tab active?
The following example gives the specific tab a class "active":
var tabs = $('ul.tabs');
tabs.each(function(i) {
//Get all tabs
var tab = $(this).find('> li > a');
tab.click(function(e) {
//Get Location of tab's content
var contentLocation = $(this).attr('href') + "Tab";
//Let go if not a hashed one
if(contentLocation.charAt(0)=="#") {
e.preventDefault();
//Make Tab Active
tab.removeClass('active');
$(this).addClass('active');
//Show Tab Content & add active class
$(contentLocation).show().addClass('active').siblings().hide().removeClass('active');
}
});
How do I modify this to work with links to other pages within my site? Here is the html:
<ul id="nav" class="tabs">
<li><a href="/" title="Home" class="active">Home</a></li>
<li><a href="/about/" title="About us">About</a></li>
<li><a href="/demo/" title="Demo">Demo</a></li>
<li><a href="/where/" class="dir" title="Where">Where</a></li>
<li><a href="/contact/" class="dir" title="Contact Us">Contact Us</a></li>
</ul>
The above jquery only works for #tab1, #tab2 etc, how do I make the tab active depending on the current page name? Sorry if this is a little unclear, it's quite hard to explain!
如果你对这篇内容有疑问，欢迎到本站社区发帖提问 参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱，如果其他用户或者作者回复了您的评论，将不能在第一时间通知您！
发布评论
评论（2）
在页面加载时，您可以检查“window.location”对象以了解正在显示的页面，然后将“active”类设置为相应的链接：
$(document).ready(function () { //iterate through your links and see if they are found in the window.location.pathname string var loc_href = window.location.pathname; $('#nav a').each(function () { if (loc_href == $(this).attr('href')) { $(this).addClass('active'); } }); });注意：loc == $(this).attr( 'href') 行查看链接的 href 值是否与 window.location.pathname 字符串完全匹配。
On the load of the page you can check the 'window.location' object for what page is being displayed, and then set the 'active' class to the corresponding link:
$(document).ready(function () { //iterate through your links and see if they are found in the window.location.pathname string var loc_href = window.location.pathname; $('#nav a').each(function () { if (loc_href == $(this).attr('href')) { $(this).addClass('active'); } }); });NOTE: that the loc == $(this).attr('href') line looks to see if the href values for the links exactly match the window.location.pathname string.
将返回当前页面的 URL，因此您可以将 if 语句更改为类似 -
它将检查单击的 href 的链接是否包含在当前页面的 URL 中。显然，您必须更改此逻辑以满足您自己的需求。
Will return the URL of the current page, so you could change your if statment to something like -
Which will check to see if the link of the clicked href is contained in the current page's URL. You'd obviously have to change this logic to suit your own needs.