框架很多,能直接拿就没必要动手写重复代码
简单的一个tab切换demo:
#tabs > li.active{
text-decoration: underline;
}
#tabs > li{
list-style: none;
display: inline-block;
float: left;
padding: 5px 10px;
}
#tabs > li:hover{
text-decoration: underline;
cursor: pointer;
}
#tabContent{
clear: left;
}
#tabContent > div{
display: none;
border: 1px solid gray;
width: 300px;
height: 100px;
}
#tabContent > div.active{
display: block;
}
- tab1
- tab2
- tab3
- tab4
tab1 text
tab2 text
tab3 text
tab4 text
$(function(){
$("#tabs > li").on('click', function(){
$(this).parent().find("li").removeClass("active");
$(this).addClass("active");
var role = $(this).attr("role");
$("#tabContent > div").hide();
$("#tabContent > div#" + role).show();
});
})