I have some tabs on a sub page that I would like to link to from another page. This is the 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>
The tab-content is opened with some basic jQuery:
$(".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();
});
What I would like to do is link to these tabs from another page, and have the jQuery add a .click() event to "open" the tab content and put the class .current on the corresponding li.
Here's the css and why add a hash won't work - by default it's display none:
.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;
}
I've tried piecing these things together with no luck. Do I need to carry a variable, or do something with ajax?
Aucun commentaire:
Enregistrer un commentaire