我正在使用下面的代码实现简单的 jquery 选项卡效果。它工作得很好,但是,我希望能够使用这样的链接:
<a href="" class="tab-link-1">Tab Link 1</a>
我希望能够在与带有标签的页面不同的页面上使用此链接。然后,理想情况下,一旦链接将用户带到新页面(带有选项卡),页面将加载已打开的所选选项卡或当前类。有什么建议吗?
$(".tabs-menu a").hover(function(event) {
event.preventDefault();
$(this).parent().addClass("current");
$(this).parent().siblings().removeClass("current");
var tab = $(this).attr("href");
$(".tab-content").not(tab).css("display", "none");
$(tab).fadeIn();
});
最佳答案
在不同的页面上,将某种 URL 参数添加到带有标签的页面的链接中。例如http://yourpage.com/?active_tab=1
从那里您需要在准备好的文档上搜索 active_tab url 参数,然后在 jquery 中添加适当的类。
像这样应该可以解决问题!
$(document).ready(function() {
var search = window.location.search; //gives search string of url i.e. ?param1=a¶m2=b
var searchAry = search.split('&'); //split up the search string based on & delimeter. if theres no other params you won't need to do this
var tabActive;
for (var i = 0; i < searchAry.length; i++) {
var tmp = searchAry[i].substring(1); //remove '?' or '&' at beginning of each string
if (tmp.indexOf('tab_active') > -1) { //if the current param is the tab_active param
var tabActive = tmp.replace('tab_active=', ''); //parse out the number
}
}
if (tabActive) {
var elemClass = '.tab-link-' + tabActive;
$(tabActive).parent().addClass('current');
}
});
关于使用外部 URL 的 jQuery 标签,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/35798356/