使用tab分页,进行内容切换,可以仅使用html和js来实现
HTML
test.html
<ul id="tab">
<li class="tabin">test1</li>
<li>test2</li>
<li>test3</li>
</ul>
<div id="content">
<div id="realcontent"></div>
</div>
JS
test.js
$("#tab li").each(function (index) {
$(this).click(function () {
$("#tab li.tabin").removeClass("tabin");
$(this).addClass("tabin");
if (index == 0) {
alert("0");
$("#realcontent").load("test0.html");
}
else if (index == 1) {
alert("1");
$("#realcontent").load("test1.html");
} else if (index == 2) {
alert("2");
$("#realcontent").load("test2.html");
}
});
目前是可以实现点击test1、test2、test3分别出现不同的情况,但是为了实现看起来像tab的效果,可以使用css来进行调样式
css样式
ul,li{
padding: 0;
margin: 0;
list-style: none;
}
#tab li{
float: left;
background-color:white;
color: blue;
padding: 5px;
margin-right: 2px;
}
#tab li.tabin{
background-color:#F2F6FB;
border: 1px solid black;
border-bottom: 0px;
z-index: 100;
position: relative;
}
#content{
width: 500px;
height: 100px;
padding: 10px;
background-color: #F2F6FB;
clear: left;
border: 1px solid black;
position: relative;
top: -1px;
}