本篇内容主要讲解“怎么用html+css+jquery做选项卡”，感兴趣的朋友不妨来看看。本文介绍的方法操作简单快捷，实用性强。下面就让小编来带大家学习“怎么用html+css+jquery做选项卡”吧!

创新互联公司专注于解放网站建设服务及定制，我们拥有丰富的企业做网站经验。 热诚为您提供解放营销型网站建设，解放网站制作、解放网页设计、解放网站官网定制、小程序定制开发服务，打造解放网络公司原创品牌,更为您提供解放网站排名全网营销落地服务。

body{

margin:0px;

padding:0px;

}

#main{

width:310px;

border:1pxsolid#C8C8CC;

margin-left:auto;

margin-right

:auto;

margin-top:50px;

}

.main_title{

width:310px;

border-bottom:1pxsolid#C8C8CC;

height:30px;

}

#maindiv.chang{

border:1pxsolid#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_headfont{

font-size:13px;

color:#808080;

margin-top:5px;

}

.main_content{

width:310px;

border-top:1pxsolid#808080;

}

.main_contentul{

margin-left:-30px;

margin-top:5px;

width:290px;

}

.main_contentulli{

list-style-type

:none;

font-size:13px;

color:#2464B2;

border-bottom:1pxdotted#808080;

line-height:27px;

}

.main_contentullia{

font-size:13px;

color:#2464B2;

text-decoration

:none;

}

.main_contentullia:hover{

text-decoration:underline;

}

#maindivul.main_content_chang{

width:290px;

position:relative;

z-index:100;

top:0px;

left:0px;

display:block;

}

#maindivul{

position:relative;

display:none;

}

$(function(){

$(".chang").each(function(index){

$(this).click(function(){

$(this).css("background-color","#E02D29");

$(this).siblings("div").css("background-color","#fff");

$("#maindivul").removeClass("main_content_chang");

$(".main_contentul:eq("+index+")").show().siblings("ul").hide();

})

})

})

实时热点