我在子页面上有一些标签,我想从另一个页面链接到该页面。这是html:
<div id="tabs-container">
<ul class="tabs-menu">
<li class="current"><a href="#tab-1"</a></li>
<li><a href="#tab-2"></a></li>
<li><a href="#tab-3"></a></li>
</ul>
<div class="tab">
<div id="tab-1" class="tab-content"></div>
<div id="tab-2" class="tab-content"></div>
<div id="tab-3" class="tab-content"></div>
</div>
使用一些基本的jQuery打开tab-content:
$(".tabs-menu a").click(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();
});
我想要做的是从另一个页面链接到这些标签,并让jQuery将一个.click()事件添加到&#34;打开&#34;选项卡内容并将类.current放在相应的li上。
这里有css以及为什么添加哈希不会工作 - 默认情况下它不显示:
.tabs-menu {height: 60px;}
.tabs-menu li {
height: 60px;
line-height: 66px;
display: inline-block;
margin-right: 10px;
list-style-type: none;
background: #EFEFEF;
padding: 10px;
border-radius: 3px;
width: 20.5%;
text-align: center;
margin: 0 1%;
}
.tabs-menu li.current {
position: relative;
background-color: orange;
z-index: 5;
}
.tabs-menu li.current a {
color: #FFFFFF;
}
.tabs-menu li a {
display: block;
color: red;
text-decoration: none;
}
.tab {
background-color: #DDD;
float: left;
margin-bottom: 20px;
width: auto;
}
.tab-content {
padding: 20px;
display: none;
text-align: center;
}
#tab-1 {
display: block;
}
我试过拼凑这些东西,没有运气。我是否需要携带变量,或者使用ajax做什么?