js tab简单功能

原创 小棋子 随笔 js 51阅读 2019-04-25 10:25:35 举报

<div class="notice">
2 <div class="notice-tit" id="notice-tit">
3 <ul>
4 <li class="select"><a href="#">公告</a></li>
5 <li><a href="#">规则</a></li>
6 <li><a href="#">论坛</a></li>
7 <li><a href="#">安全</a></li>
8 <li><a href="#">公益</a></li>
9 </ul>
10 </div>
11 <div class="notice-con" id="notice-con">
12 <div style="display: block">我是内容1</div>
13 <div style="display: none">我是内容2</div>
14 <div style="display: none">我是内容3</div>
15 <div style="display: none">我是内容4</div>
16 <div style="display: none">我是内容5</div>
17 </div>
18 </div>

<script>
2 //获取id封装成一个函数$()方便调用
3 function $(id){
4 //如果传入的参数类型为字符串则获取当前ID元素,否则返回id
5 return typeof id==="string"?document.getElementById(id):id;
6 }
7 //window.onload表示当文档加载完毕时执行函数
8 window.onload=function(){
9 //获取#notice-tit下面的全部li元素
10 var titles=$('notice-tit').getElementsByTagName('li');
11 //获取#notice-con下面的全部div元素
12 var divs=$('notice-con').getElementsByTagName('div');
13 //遍历所有li标签,给每个li加上id和值,并且绑定事件
14 for(var i=0;i<titles.length;i++){
15 //给每个li加上id和值
16 titles[i].id=i;
17 //给每个li绑定事件
18 titles[i].onmouseover=function(){
19 //悬浮后首先应该初始化每个li和div上的类和display
20 for(var j=0;j<titles.length;j++){
21 titles[j].className="";
22 divs[j].style.display="none";
23 }
24 //给当前悬浮元素添加属性
25 titles[this.id].className="select";
26 divs[this.id].style.display="block";
27 }
28 }
29 }
30 </script>

1 <style>
2 {
3 margin:0;
4 padding: 0;
5 list-style: none;
6 font-size: 12px;
7 }
8 .notice{
9 width: 298px;
10 height: 98px;
11 margin: 10px;
12 border:1px solid #7c7c7c;
13 overflow: hidden;
14 }
15 .notice-tit{
16 height: 27px;
17 background-color: #eaeaea;
18 position: relative;
19 }
20 .notice-tit ul{
21 position: absolute;
22 width: 300px;
23 left: -1px;
24 }
25
26 .notice-tit ul li{
27 float: left;
28 width: 58px;
29 height: 26px;
30 line-height: 26px;
31 text-align: center;
32 border-bottom: 1px solid #7c7c7c;
33 padding: 0 1px;
34 }
35 .notice-tit ul a{
36 text-decoration: none;
37 display: block;
38 }
39 .notice-tit ul .select{
40 background-color: white;
41 border-right: 1px solid #7c7c7c;
42 border-left: 1px solid #7c7c7c;
43 border-bottom: 1px solid white;
44 padding: 0;
45 }
46 /
.notice-tit ul li:hover{
47 background-color: white;
48 border-right: 1px solid #7c7c7c;
49 border-left: 1px solid #7c7c7c;
50 border-bottom: 1px solid white;
51 padding: 0;
52 }*/
53 </script>

评论 ( 0 )
最新评论
暂无评论

赶紧努力消灭 0 回复