使用html+css+jquery做选项卡的注意事项有哪些-创新互联

这篇文章给大家分享的是有关使用html+css+jquery做选项卡的注意事项有哪些的内容。小编觉得挺实用的，因此分享给大家做个参考，一起跟随小编过来看看吧。

创新互联建站是一家专注于成都网站制作、成都网站设计与策划设计,永宁网站建设哪家好?创新互联建站做网站,专注于网站建设十余年,网设计领域的专业建站公司;建站业务涵盖:永宁等地区。永宁做网站价格咨询:028-86922220

html+css+jquery做选项卡的注意事项有哪些，下面就是实战案例，一起来看一下。

 
 
 
 
 
 
body{ 
margin:0px; 
padding:0px; 
} 
#main{ 
width:310px; 
border:1px solid #C8C8CC; 
margin-left:auto; 
margin-right
:auto; 
margin-top:50px; 
} 
.main_title{ 
width:310px; 
border-bottom:1px solid #C8C8CC; 
height:30px; 
} 
#main div .chang{ 
border:1px solid #C8C8CC; 
float:left; 
width:153px; 
height:26px; 
text-align:center; 
padding-top
:4px; 
cursor:pointer; 
} 
.main_head{ 
width:310px; 
height:25px; 
background-color
:#FFF4F8; 
} 
.main_head font{ 
font-size:13px; 
color:#808080; 
margin-top:5px; 
} 
.main_content{ 
width:310px; 
border-top:1px solid #808080; 
} 
.main_content ul{ 
margin-left:-30px; 
margin-top:5px; 
width:290px; 
} 
.main_content ul li{ 
list-style-type
:none; 
font-size:13px; 
color:#2464B2; 
border-bottom:1px dotted #808080; 
line-height:27px; 
} 
.main_content ul li a{ 
font-size:13px; 
color:#2464B2; 
text-decoration
:none; 
} 
.main_content ul li a:hover{ 
text-decoration:underline; 
} 
#main div ul.main_content_chang{ 
width:290px; 
position:relative; 
z-index:100; 
top:0px; 
left:0px; 
display:block; 
} 
#main div ul{ 
position:relative; 
display:none; 
} 
 
 
 
$(function(){ 
$(".chang").each(function(index){ 
$(this).click(function(){ 
$(this).css("background-color","#E02D29"); 
$(this).siblings("div").css("background-color","#fff"); 
$("#main div ul").removeClass("main_content_chang"); 
$(".main_content ul:eq("+index+")").show().siblings("ul").hide(); 
}) 
}) 
}) 
 
 
 
 
 
实时热点