jQuery——点击切换
程序员文章站
2022-07-14 11:01:49
...
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>点击切换</title>
<script src="jquery-1.9.1.js"></script>
<style>
*{
padding: 0;
border: 0;
}
a{
text-decoration: none;
color: #0f0f0f;
}
.page{
width: 550px;
height: 100%;
overflow: hidden;
margin: auto;
background-color: white;
}
.all{
width: 500px;
height: 100%;
overflow: hidden;
margin: 20px;
background-color: white;
}
.title{
width: 500px;
height: 30px;
border-bottom: #eaeaec solid 1px;
margin: 30px 0 0 0;
}
.title ul{
margin-top: 0px;
position: relative;
float: left;
height: 30px;
}
.title li{
float: left;
width: 70px;
height: 30px;
font-size: 16px;
color: #0f0f0f;
list-style: none;
}
.title .thistab a{
color: #e86656;
}
.title li a{
display: block;
height: 30px;
line-height: 30px;
text-align: center;
}
.title .thistab .line{
width: 100%;
background-color: #e86656;
height: 2px;
}
.title li .line{
display: block;
background-color: #e86656;
width: 0;
height: 2px;
}
.content{
width: 100%;
height: 200px;
position: relative;
}
.cont-box{
position: absolute;
top: 6px;
left: 0;
margin-left: 0;
font-size: 12px;
width: 10000px;
transition: margin-left 0.4s linear;
}
.cont-list{
float: left;
width: 500px;
}
.cont-list ul{
width: 500px;
height: 200px;
}
.cont-list li{
width: 500px;
height: 32px;
line-height: 32px;
overflow: hidden;
border-bottom: #cececf dotted 1px !important;
}
.cont-list li em{
color: #9b9b9b;
font-style: normal;
float: right;
}
.cont-list li span{
width: 9px;
height: 15px;
margin: 9px 9px 0 0;
display: block;
float: left;
background: url("icon.png") no-repeat;
background-position: left -22px;
transition: 1s;
}
.cont-list li a{
font-size: 12px;
}
</style>
</head>
<body>
<div class="page">
<div class="all">
<div class="title">
<ul>
<li class="thistab tips">
<a href="javascript:;">万花</a>
<span class="line"></span>
</li>
<li class="tips">
<a href="javascript:;">七秀</a>
<span class="line"></span>
</li>
</ul>
</div>
<div class="content">
<div class="cont-box n">
<div class="cont-list a">
<ul>
<li>
<em>08-31</em>
<span></span>
<a href="" target="_blank">春兰秋菊夏清风</a>
</li>
</ul>
</div>
<div class="cont-list a">
<ul>
<li>
<em>08-31</em>
<span></span>
<a href="" target="_blank">西子湖畔西子情</a>
</li>
</ul>
</div>
</div>
</div>
</div>
</div>
<script>
var lis=$(".tips");
lis.each(function(i){
$(this).on("click",function(){
//console.log(lis.length);
for(var j=0;j<lis.length;j++){
if(j==i){
$(this).attr("class","thistab li");
}else{
lis.eq(j).attr("class","li");
}
};
$(".n").css("margin-left",-500*i+"px");
})
})
</script>
</body>
</html>
下一篇： Docker安装、更新、卸载