【前端积累】简单的导航
原创
©著作权归作者所有：来自51CTO博客作者slp51的原创作品，请联系作者获取转载授权，否则将追究法律责任
1 <!DOCTYPE html>
2 <html>
3 <head lang="en">
4 <meta charset="UTF-8">
5 <title>导航栏</title>
6 <!--
7 list-style-type 设置或检索对象的列表项所使用的预设标记none:不适用项目符号
8 text-decoration 属性规定添加到文本的修饰。none表示无修饰 underline下划线等
9 line-height:检索或设置对象的行高，即字体最低端与字体内部顶端之间的距离
10 overflow:检索或这只对象处理溢出内容的方式 visible:溢出不做处理 hidden:隐藏且不出现滚动条 scroll:隐藏溢出且以滚动条的形式显示 auto:有溢出时出现滚动条 无溢出时不出现
11 text-indent:设置或检索对象中的文本的缩进
12 border-style：设置边框样式
13 border-width:设置或检索对象的边框宽度
14 font-weight:设置或检索对象的文本字体的粗细
15
16 -->
17 <style type="text/css">
18 body{margin:0;padding:0 0 12px 0;font-size:12px;line-height:22px;font-family:"\5b8b\4f53","Arial Narrow";background:#fff;}
19 form,ul,li,p,h1,h2,h3,h4,h5,h6{margin:0;padding:0;}
20 input,select{font-size:12px;line-height:16px;}
21 img{border:0;}
22 ul,li{list-style-type:none;}
23 a {color:#00007F;text-decoration:none;}
24 a:hover {color:#bd0a01;text-decoration:underline;}
25
26 .box {
27 width: 150px;
28 margin: 0 auto;
29 }
30 .menu{
31 overflow:hidden;
32 border-color: #C4D5DF;
33 border-style: solid;
34 border-width: 0 1px 1px;
35 }
36 /* lv1 */
37 .menu li.level1 a{
38 display: block;
39 height: 28px;
40 line-height: 28px;
41 background:#EBF3F8;
42 font-weight:700;
43 color: #5893B7;
44 text-indent: 14px;
45 border-top: 1px solid #C4D5DF;
46 }
47 .menu li.level1 a:hover{text-decoration:none;}
48 .menu li.level1 a.current{background:#B1D7EF;}
49 /* lv2 */
50 .menu li ul{overflow:hidden;}
51 .menu li ul.level2{display:none;}
52 .menu li ul.level2 li a{
53 display: block;
54 height: 28px;
55 line-height: 28px;
56 background:#ffffff;
57 font-weight:400;
58 color: #42556B;
59 text-indent: 18px;
60 border-top: 0px solid #ffffff;
61 overflow: hidden;
62 }
63 .menu li ul.level2 li a:hover{
64 color:#f60;
65 }
66 </style>
67 <script src="../jquery/jquery-3.1.1.js" type="text/javascript"></script>
68 <!--
69 .next()方法允许我们找遍元素集合中紧跟着这些元素的直接兄弟元素
70 parent()方法允许我们能够在DOM树中搜索到这些元素的父级元素
71 .siblings([selector]):获得匹配元素集合中每个元素的兄弟元素
72 .children([selector]):获得匹配元素集合中每个元素的子元素，选择器选择性筛选
73
74 -->
75 <script type="text/javascript">
76 $(document).ready(function () {
77 $(".level1 > a").click(function(){
78 $(this).addClass("current")//为当前元素添加current样式
79 .next().show()//下一个元素显示
80 .parent().siblings().children('a').removeClass("current")//父元素的同辈元素的子元素a移除current样式
81 .next().hide();//下一个元素隐藏
82 return false;
83 });
84 });
85 </script>
86 </head>
87 <body>
88 <div class="box">
89 <ul class="menu">
90 <li class="level1">
91 <a href="#none">衬衫</a>
92 <ul class="level2">
93 <li><a href="#none">短袖衬衫</a> </li>
94 <li><a href="#none">长袖衬衫</a> </li>
95 <li><a href="#none">短袖T靴</a> </li>
96 <li><a href="#none">长袖T靴</a> </li>
97 </ul>
98 </li>
99 <li class="level1">
100 <a href="#none">卫衣</a>
101 <ul class="level2">
102 <li><a href="#none">开襟卫衣</a> </li>
103 <li><a href="#none">套头卫衣</a> </li>
104 <li><a href="#none">运动卫衣</a> </li>
105 <li><a href="#none">童装卫衣</a> </li>
106 </ul>
107 </li>
108 <li class="level1">
109 <a href="#none">裤子</a>
110 <ul class="level2">
111 <li><a href="#none">短裤</a> </li>
112 <li><a href="#none">休闲裤</a> </li>
113 <li><a href="#none">牛仔裤</a> </li>
114 <li><a href="#none">免烫卡其裤</a> </li>
115 </ul>
116 </li>
117 </ul>
118 </div>
119 </body>
120 </html>
