html+js实现tab分页进行内容切换

使用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;
}