<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>tab页切换</title>
<style>
.tab {
background: grey;
overflow: auto;
width: 240px;
border-radius: 10px;
}
.tab a {
width: 80px;
height: 40px;
line-height: 40px;
text-align: center;
font-size: 20px;
color: #fdfcff;
border-radius: 10px;
text-decoration: none;
float: left;
cursor: pointer;
}
.tab a:hover,
.tab .active {
background-color: #3070e6;
}
.content {
width: 220px;
height: 180px;
margin-top: 10px;
padding: 10px;
font-size: 20px;
border-radius: 10px;
}
.content div {
display: none;
}
.content div:target {
display: block;
}
</style>
</head>
<body>
<!-- tab栏 -->
<div class="tab">
<a href=" " class="active">tab1</a >
<a href="#content2">tab2</a >
<a href="#content3">tab3</a >
</div>
<!-- 内容栏 -->
<div class="content">
<div id="content1">content1
<table><tr>putong</tr>
</table>
</div>
<div id="content2">content2
<table><tr>jsf</tr>
</table>
</div>
<div id="content3">content3</div>
</div>
<script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script>
<script>
// 绑定点击事件
$(‘.tab a‘).unbind(‘click‘).click(function () {
$(this).addClass(‘active‘).siblings().removeClass(‘active‘);
});
// 给默认
$(‘.tab a‘)[0].click();
</script>
</body>
</html>
tab页前端实现 demo
于 2022-09-04 16:22:59 首次发布