jQuery选项卡切换

最新推荐文章于 2025-07-01 13:43:14 发布

cici_xueqin

最新推荐文章于 2025-07-01 13:43:14 发布

阅读量974

点赞数

<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="Generator" content="EditPlus®">
<meta name="Author" content="">
<meta name="Keywords" content="">
<meta name="Description" content="">
<title>Document</title>

<style type="text/css">
*{
margin:0;
padding:0;
}
#soso_title{
float:left;
}
li{
list-style:none;
}
#soso_title li{
width:67px;
height:44px;
position:relative;
}
#soso_title li a{
display:inline-block;
color:#fff;
text-align:center;
width:67px;
height:44px;
line-height:44px;
background:#38414C;
text-decoration:none;
}

#soso_title .soso_active{
color:#FF7800;
background:#fff;

}

#soso_title i.sanjiao{
display:block;
position:absolute;
right:0px;
top:50%;
margin-top:-5px;
border:10px solid transparent;

border-right-color:lightgreen;
}

#soso_content>div{
margin-left:67px;
background:lightgreen;

height:350px;
width:350px;
display:none;
}
#soso_content>div:first-child{
display:block;
}

</style>

</head>
<body>
<div id="soso">
<ul id="soso_title">
<li><a class="soso_active" href="">景点</a><i class="sanjiao"></i></li>
<li><a href="">风景</a><i></i></li>
<li><a href="">机票</a><i></i></li>
<li><a href="">周边游</a><i></i></li>
<li><a href="">邮轮</a><i></i></li>
<li><a href="">火车票</a><i></i></li>
<li><a href="">国内游</a><i></i></li>
<li><a href="">出境游</a><i></i></li>
</ul>
<div id="soso_content">
<div class="jd">景点</div>
<div class="fj">景点</div>
<div class="jp">机票</div>
<div class="zby">周边游</div>
<div class="yl">游轮</div>
<div class="hcp">火车票</div>
<div class="gly">国内游</div>
<div class="cjy">出境游</div>

</div>

</div>

<script src="jquery-1.11.3.js"></script>
<script type="text/javascript">
$("#soso_title>li").on("click","a",function(e){
e.preventDefault();
//$(this).addClass("soso_active").parent().siblings().children().removeClass("soso_active");
$(this).addClass("soso_active").siblings().addClass("sanjiao").parent().siblings().children().removeClass("soso_active sanjiao");
var index = $(this).parent().index();
console.log(index);
$("#soso_content>div").eq(index).show().siblings().hide();

});
</script>
</body>
</html>