html tab与jQuery,jquery实现tab切换.html

New Document

body {

font-family: Verdana, Geneva, sans-serif;

font-size: 14px;

}

.tab-box {

width: 500px;

margin: 30px auto;

}

.tab-box ul {

list-style-type: none;

}

.tab-box li {

float: left;

width: 100px;

background: #ccc;

color: #09F;

height: 30px;

line-height: 30px;

text-align: center;

cursor: pointer;

margin-right: 3px;

font-weight: bold;

}

.tab-box li.active {

background: #999;

color: #F0F;

}

.tab-content {

padding-left: 40px;

}

.tab-content div {

width: 400px;

height: 500px;

padding: 15px 5px;

color: #000;

clear: left;

display: none;

background: #999;

}

/*//注意这里设置整个容器里的div为不可见的*/

.tab-box div.active-txt {

display: block;

}

/*//注意这里设置只有具有tabCont的div内容才可见*/

• 科技
• 新闻
• 体育
• 财经

sdfasfdasdfasdfas

东距丰高公路约0.6km，北距丰城水泥厂2.8km

要追溯到2002-03赛季。

人民币贬值对手机厂商利润的伤害普遍存在。

$(function() {

$(".tab-box li").each(function(index) {

$(this).mouseover(function() {

$("li.active").removeClass("active"); //注意这里

$(this).addClass("active"); //注意这里

$(".tab-content div.active-txt").removeClass("active-txt");

$(".tab-content div").eq(index).addClass("active-txt");

});

})

});

一键复制

编辑

Web IDE

原始数据

按行查看

历史