之前学习了html,以及css,写后端也有一段时间了,现在把更多的精力放在了前端,那么,就从html5以及css3开始吧~,今天主要是实现了tab选项卡切换,之前也写过,现在用html5获取元素的新方法实现了一下,话不多说,代码如下

html代码

分析代码可以知道,选项卡的class为active的时候,选项卡就被选中,当内容section的style属性为display:block时,内容就被选中

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
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
<!DOCTYPE html>
<html lang="en">

<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<style>
body {
margin: 0;
padding: 0;
background-color: #F7F7F7;
}

.tabs {
width: 400px;
margin: 30px auto;
background-color: #FFF;
border: 1px solid #C0DCC0;
box-sizing: border-box;
}

.tabs nav {
height: 40px;
text-align: center;
line-height: 40px;
overflow: hidden;
background-color: #C0DCC0;
/* 伸缩盒模型 */
display: flex;
}

nav a {
display: block;
width: 100px;
border-right: 1px solid #FFF;
color: #000;
text-decoration: none;
}

nav a:last-child {
border-right: none;
}

nav a.active {
background-color: #9BAF9B;
}

.cont {
overflow: hidden;
display: none;
}

.cont ol {
line-height: 30px;
}
</style>

</head>

<body>
<div class="tabs">
<nav>
<a href="javascript:;" data-cont="local" class="active">国内新闻</a>
<a href="javascript:;" data-cont="global" >国际新闻</a>
<a href="javascript:;" data-cont="sports" >体育新闻</a>
<a href="javascript:;" data-cont="funny">娱乐新闻</a>
</nav>
<section class="cont" id="local" style="display:block">
<ol>
<li>国内新闻</li>
<li>禽流感在感在广1处继续蔓延,温家宝指示</li>
<li>南方大旱,农作物减产绝收面积上亩</li>
<li>猪流感在广在全国暴发</li>
<li>禽流感在全国多处继续蔓延,温家宝指示</li>
<li>南方大旱,农作物减产绝收面积上亩</li>
<li>猪流感在广东群体性暴发</li>
</ol>
</section>
<section class="cont" id="global" >
<ol>
<li>国际新闻</li>
<li>禽流感次发生蔓延,温家宝指示</li>
<li>南方大旱,农作物减产绝收面积上亩</li>
<li>猪流感在广减产绝收发</li>
<li>禽流感在全国多作物减产绝收面积上亩</li>
<li>猪流感在广东群体性暴发</li>
</ol>
</section>
<section class="cont" id="sports">
<ol>
<li>体育新闻</li>
<li>禽流感在全国多处农作物农延,温家宝指示</li>
<li>南方大旱,农作物减产绝收面积上亩</li>
<li>猪流感在广东群体性暴发</li>
<li>禽流感在全农作物继续蔓延,温家宝指示</li>
<li>南方大农作物减产绝收面积上亩</li>
<li>猪流感在广东群体性暴发</li>
</ol>
</section>
<section class="cont" id="funny">
<ol>
<li>娱乐新闻</li>
<li>禽流感在全国物农延,温家宝指示</li>
<li>南方大旱,农作物减产绝收面积上亩</li>
<li>猪流感在广东群体性暴发</li>
<li>禽流感在全农作物继续蔓延,温家宝指示</li>
<li>猪流感在广东群体性暴发</li>
</ol>
</section>
</div>

js代码

内容卡指内容,tab卡指点击的选项

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
27
28
29
30
<script>
<!--document.querySelectorAll获取所有的a标签-->
var aArr=document.querySelectorAll('a');
<!--循环遍历-->
for(var i=0;i<aArr.length;i++){
<!--给每个获取到的元素添加点击事件-->
aArr[i].onclick=function(){
<!--获取当前激活的tab选项卡-->
var active=document.querySelector(".active");
<!--移除之前的选项卡激活属性-->
active.classList.remove("active");
<!--给当前点击的选项卡添加激活属性-->
this.classList.add("active");
<!--获取当前的section标签id名字-->
var name=this.getAttribute("data-cont");
<!--根据获取到的名字获取当前的内容卡-->
var section=document.getElementById(name);
<!--获取所有classcont的元素,并循环遍历,取消所有内容卡的样式-->
var cont = document.getElementsByClassName("cont");
for(var i=0;i<cont.length;i++){
cont[i].style.display="none";

}
<!--激活当前内容卡的样式-->
section.style.display="block";


}
}
</script>

总结

排它思想