分享程序员开发的那些事...
更新时间：2022-09-30 23:05:44
标签页切换应该是网页中最常见的功能之一了吧，今天简单的做个记录，希望能帮到一部分初学者
HTML代码：
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
|
<div id="header">
<ul class="clearfix">
<!-- 注意看a标签的href属性和下面三个div的id值 -->
<li><a href="#containerOne">标签一</a></li>
<li class="active"><a href="#containerTwo">标签二</a></li>
<li><a href="#containerThree">标签三</a></li>
</ul>
</div>
<div id="mainContainer">
<div id="containerOne">
第一个标签页<br>
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Architecto dolore eos ipsum laborum, minima nesciunt nihil provident qui quis quos. Adipisci cupiditate dolore fuga fugiat molestias nam rem, reprehenderit tenetur.
</div>
<div id="containerTwo" class="active">
第二个标签页<br>
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Architecto dolore eos ipsum laborum, minima nesciunt nihil provident qui quis quos. Adipisci cupiditate dolore fuga fugiat molestias nam rem, reprehenderit tenetur.
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Accusantium maiores nemo possimus quas ratione? Aspernatur assumenda aut consequatur, culpa delectus exercitationem fuga laborum numquam provident sapiente, sequi suscipit ut voluptas!
</div>
<div id="containerThree">
第三个标签页<br>
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Architecto dolore eos ipsum laborum, minima nesciunt nihil provident qui quis quos. Adipisci cupiditate dolore fuga fugiat molestias nam rem, reprehenderit tenetur.
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ab animi, assumenda dolores doloribus eum ex expedita fuga fugiat impedit, laboriosam minus nam repellendus reprehenderit saepe sequi similique, sit sunt voluptatibus.
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ad aperiam eius id, magni maiores odio provident quibusdam rerum tempora ullam? Assumenda deleniti impedit minima officiis perferendis. Accusantium dolorem nemo perferendis.
</div>
</div>
|
CSS代码：
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
|
/*简单重置下样式*/*{margin:0; padding:0;}
ul{list-style:none;}
a{text-decoration: none; color:#000;}
.clearfix{zoom:1;}
.clearfix:after{content:''; display:block; clear:both;}
/*标签头样式*/#header{background:#4bb;}
#header ul li{float:left; width:33.3%; text-align:center;}
#header ul li a{display:block; width:100%; height:30px; line-height:30px; font-weight:bold; letter-spacing:1px;}
#header ul li.active{background:#ae2;}
#header ul li.active a{color: #f00;}
/* 默认隐藏 */#mainContainer>div{display:none;}
#mainContainer>div.active{display:block;}
|
JS代码，注意先引入jQuery
|
1
2
3
4
5
6
7
8
|
$('#header ul li a').click(function(e){
e.preventDefault(); //阻止a链接默认跳转
//控制标签头
$(this).parent().addClass('active').siblings('.active').removeClass('active');
//控制显示对应的div
var id = $(this).attr('href'); //获取a元素的href属性值
$(id).addClass('active').siblings('.active').removeClass('active');
}) |
查看下切换效果截图：
