版权声明：未经允许，禁止转载，否则将追究法律责任。 https://blog.csdn.net/qq_39476250/article/details/88361804
html布局
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<link rel="stylesheet" type="text/css" href="css/style.css"/>
</head>
<body>
Tabs
<div class="tab">
<ul class="clearfix ys">
<li class="btn">First</li>
<li>Second</li>
<li>Third</li>
</ul>
<div class="con">
<div class="con-1 active">
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do siusmod tenpor incididunt ut labore et dolore
<br>magna aliqua. Ut enim ad monim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
<br>consequat.
</div>
<div class="con-1">
第二页
</div>
<div class="con-1">
第三页
</div>
</div>
</div>
/*jqueery布局*/
<script type="text/javascript" src="js/jquery-3.3.1.js"></script>
<script type="text/javascript">
$(".tab ul li").click(function(){
$(this).addClass("btn")
.siblings()
.removeClass("btn");
var index=$(this).index();
$(".con .con-1").eq(index)
.addClass("active")
.siblings()
.removeClass("active");
});
</script>
</body>
</html>
CSS布局
*{
margin: 0;
padding: 0;
}
.tab{
width: 750px;
border: 1px outset black;
border-radius: 5px;
}
ul>li{
float: left;
list-style: none;
padding: 5px 7px;
margin-top: 8px;
margin-left: 5px;
border-radius: 5px;
color: #1c8cbe;
}
.btn{
background: white;
color: #de8915;
}
.clearfix::before,
.clearfix::after{
display: block;
content: "";
clear: both;
}
.ys{
margin-top: 5px;
margin-left: 5px;
width: 740px;
height: 40px;
background: #f7be5e;
border-radius: 5px;
border-bottom: 1px outset #e5910a;
}
.con{
margin-top: 10px;
margin-left: 10px;
}
.con-1{
font-size: 13px;
display: none;
}
.active{
display: block;
}