html左侧选项卡的代码,HTML侧边栏Tab选项卡

HTML CSS Jq实现的简单侧边栏选项卡，实现非常简单，你也可以轻松的在现有的基础上扩充。先看下效果图，再献上代码。

HTML代码

选项卡1 选项卡2 选项卡3 选项卡4 选项卡5

我是Tab选项卡1的内容

使用简单，引入css和Jq代码即可

我是Tab选项卡2的内容

我是Tab选项卡3的内容

我是Tab选项卡4的内容

我是Tab选项卡5的内容

CSS代码#TabMain {

width: 800px;

height: 500px;

margin: 0 auto;

margin-top: 100px;

}

.tabItemContainer {

width: 100px;

height: 500px;

float: left;

}

.tabBodyContainer {

width: 677px;

height: 500px;

float: left;

background-color: #fff;

border: 1px solid #ccc;

-webkit-border-radius: 0 5px 5px 0;

-moz-border-radius: 0 5px 5px 0;

border-radius: 0 5px 5px 0;

margin-left: 1px;

}

.tabItemContainer>li {

list-style: none;

text-align: center;

}

.tabItemContainer>li>a {

float: left;

width: 100%;

padding: 30px 0 30px 0;

font: 16px "微软雅黑", Arial, Helvetica, sans-serif;

color: #808080;

cursor: pointer;

text-decoration: none;

border:1px solid transparent;

}

.tabItemCurrent {

background-color: #fff;

border: 1px solid #ccc !important;

border-right: 1px solid #fff !important;

position: relative;

-webkit-border-radius: 5px 0 0 5px;

-moz-border-radius: 5px 0 0 5px;

border-radius: 5px 0 0 5px;

}

.tabItemContainer>li>a:hover {

color: #333;

}

.tabBodyItem {

position: absolute;

width: 677px;

height: 500px;

display: none;

}

.tabBodyItem>p {

font: 13px "微软雅黑", Arial, Helvetica, sans-serif;

text-align: center;

margin-top: 30px;

}

.tabBodyItem>p>a {

text-decoration: none;

color: #0F3;

}

.tabBodyCurrent{

display:block;

}

Jq代码var SidebarTabHandler={

Init:function(){

$(".tabItemContainer>li").click(function(){

$(".tabItemContainer>li>a").removeClass("tabItemCurrent");

$(".tabBodyItem").removeClass("tabBodyCurrent");

$(this).find("a").addClass("tabItemCurrent");

$($(".tabBodyItem")[$(this).index()]).addClass("tabBodyCurrent");

});

}

}