java水平选项卡_[Java教程]tab选项卡

[Java教程]tab选项卡

0 2017-08-01 23:53:05

jQuery tab切换

*{

margin:0;

padding:0;

}

.wrap{

margin-left: 50px;

margin-top: 50px;

}

/*清浮动---clearfix*/

.clearfix {

*zoom: 1;

}

.clearfix:after {

content: "";

clear: both;

display: block;

height: 0;

font-size: 0;

visibility: hidden;

}

.blist {

border:1px solid #d9d9d9;

width: 1196px;

height: 97px;

}

.blist li:first-child{

border-left: none;

}

.blist li{

list-style: none;

width: 170px;

height: 97px;

border-left:1px solid #d9d9d9;

font-size: 26px;

font-family: "Microsoft YaHei";

line-height: 97px;

color:#5A3D0A;

background:#fff;

text-align: center;

float: left;

/*鼠标样式改变为一个手*/

cursor: pointer;

/*字体免选中*/

-webkit-user-select: none;

}

.blsit-list{

width: 1196px;

}

.blsit-list li{

list-style: none;

width: 1196px;

border:1px solid #ccc;

height: 200px;

border-top: none;

}

.wrap .blist li.active{

color: red;

background:#5A3D0A;

color:#fff;

position: relative;

height: 97px;

}

.blsit-list li:first-child{

display: block;

}

.blsit-list li{

display: none;

}

• 华中地区
• 华东地区
• 华北地区
• 华南地区
• 东北地区
• 西南地区
• 西北地区

• A
• B
• C
• D

$(function(){

$(".blist li").eq(0).css("border-left","none");

$(".blist").on("click","li",function(){

// 设index为当前点击

var index = $(this).index();

// 点击添加样式利用siblings清除其他兄弟节点样式

$(this).addClass("active").siblings().removeClass("active");

// 同理显示与隐藏

$(this).parents(".wrap").find(".blsit-list li").eq(index).show().siblings().hide();

})

})

本文网址：http://www.shaoqun.com/a/318398.html

*特别声明：以上内容来自于网络收集，著作权属原作者所有，如有侵权，请联系我们：admin@shaoqun.com。

0