首页 / 知识

html+css+jquery做选项卡

2023-04-11 15:03:00

　　<!DOCTYPEhtmlPUBLIC"-//W3C//DTDXHTML1.0Transitional//EN""http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

　　<htmlxmlns="http://www.w3.org/1999/xhtml">

　　<head>

　　<metahttp-equiv="Content-Type"content="text/html;charset=utf-8"/>

　　<title>列表选项卡</title>

　　<styletype="text/css">

　　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;

　　}

　　</style>

　　<scripttype="text/javascript"src="js/jquery-1.9.1.js"></script>

　　<scripttype="text/javascript">

　　$(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();

　　})

　　</script>

　　</head>

　　<body>

　　<divid="main">

　　<divclass="main_title">

　　<divclass="chang"style="background:#E02D29">实时热点</div>

　　<divclass="chang"style="float:right;">七日关注</div>

　　</div>

　　<divclass="main_content">

　　<ulclass="main_content_chang">

　　<li><imgsrc="img/1_1.webp"/><ahref="#">来自星星你的</a></li>

　　<li><imgsrc="img/1_2.webp"/><ahref="#">私人定制的</a></li>

　　<li><imgsrc="img/3_1.webp"/><ahref="#">全能星战的</a></li>

　　<li><imgsrc="img/1_4.webp"/><ahref="#">加多宝陪千万的</a></li>

　　<li><imgsrc="img/1_5.webp"/><ahref="#">女生厕所产子之后上课的</a></li>

　　<li><imgsrc="img/1_6.webp"/><ahref="#">圆通夺命快递始末的</a></li>

　　<li><imgsrc="img/1_7.webp"/><ahref="#">翻版张柏芝的</a></li>

　　<li><imgsrc="img/1_8.webp"/><ahref="#">李彦鹏说谎的</a></li>

　　<li><imgsrc="img/1_9.webp"/><ahref="#">1.7亿元存折的</a></li>

　　<li><imgsrc="img/1_10.webp"/><ahref="#">90后为讨好男友溺死亲生女的</a></li>

　　<listyle="text-align:right;border-bottom-style:none"><ahref="#"style="font-size:15px">查看完整榜单</a></li>

　　</ul>

　　<ul>

　　<li><imgsrc="img/1_1.webp"/><ahref="#">南京出土神秘宝剑的</a></li>

　　<li><imgsrc="img/3_1.webp"/><ahref="#">沃尔玛道歉的</a></li>

　　<li><imgsrc="img/1_4.webp"/><ahref="#">买发卡的女孩的</a></li>

　　<li><imgsrc="img/1_5.webp"/><ahref="#">假茅台骗两亿贷款的</a></li>

　　<li><imgsrc="img/1_6.webp"/><ahref="#">男子收到亡妻圣诞大礼的</a></li>

　　<li><imgsrc="img/1_7.webp"/><ahref="#">全球最美的100的</a></li>

　　<li><imgsrc="img/1_8.webp"/><ahref="#">陨石八千万</a></li>

　　<li><imgsrc="img/1_9.webp"/><ahref="#">安培参拜靖国神社</a></li>

　　<li><imgsrc="img/1_10.webp"/><ahref="#">春晚舞台曝光</a></li>

　　<listyle="text-align:right;border-bottom-style:none"><ahref="#"style="font-size:15px">查看完整榜单</a></li>

　　</ul>

　　</div>

　　</body>

　　</html>

本文转载自中文网

选项选项卡 http en Transitional W3C

首页 / 知识

html+css+jquery做选项卡

最新内容

相关内容

热门文章

推荐文章

标签云

猜你喜欢