tab栏切换效果:
1 <!DOCTYPE html>
2 <html>
3 <head lang="en">
4 <meta charset="UTF-8">
5 <title></title>
6 <style type="text/css">
7 * {
8 margin: 0;
9 padding: 0;
10 }
11 ul {
12 list-style: none;
13 }
14 .wrapper {
15 1000px;
16 height: 475px;
17 margin: 0 auto;
18 margin-top: 100px;
19 }
20 .tab {
21 border: 1px solid #ddd;
22 border-bottom: 0;
23 height: 36px;
24 320px;
25 }
26 .tab li {
27 position: relative;
28 float: left;
29 80px;
30 height: 34px;
31 line-height: 34px;
32 text-align: center;
33 cursor: pointer;
34 border-top: 4px solid #fff;
35 }
36 .tab span {
37 position: absolute;
38 right: 0;
39 top: 10px;
40 background: #ddd;
41 1px;
42 height: 14px;
43 overflow: hidden;
44 }
45 .products {
46 1002px;
47 border: 1px solid #ddd;
48 height: 476px;
49 }
50 .products .main {
51 float: left;
52 display: none;
53 }
54 .products .main.selected {
55 display: block;
56 }
57 .tab li.active {
58 border-color: red;
59 border-bottom: 0;
60 }
61 </style>
62 </head>
63 <body>
64 <div class="wrapper">
65 <ul class="tab" id="tab">
66 <li class="tab-item active">国际大牌<span>◆</span></li>
67 <li class="tab-item">国妆名牌<span>◆</span></li>
68 <li class="tab-item">清洁用品<span>◆</span></li>
69 <li class="tab-item">男士精品</li>
70 </ul>
71 <div class="products" id="products">
72 <div class="main selected">
73 <a href="###"><img src="images/guojidapai.jpg" alt=""/></a>
74 </div>
75 <div class="main">
76 <a href="###"><img src="images/guozhuangmingpin.jpg" alt=""/></a>
77 </div>
78 <div class="main">
79 <a href="###"><img src="images/qingjieyongpin.jpg" alt=""/></a>
80 </div>
81 <div class="main">
82 <a href="###"><img src="images/nanshijingpin.jpg" alt=""/></a>
83 </div>
84 </div>
85 </div>
86 </body>
87 </html>
88 <script>
89 // 功能需求:鼠标移入tab选项卡时,
90 // 1. 上面tab选项卡要切换
91 // 2. 下面产品内容要切换
92
93 // PS: 提前预知知识点
94 var tab = document.getElementById('tab'); // 这句话是在整个网页文档(document)里通过id查找tab
95 // 获取products盒子下的div盒子
96 var divBoxs = document.getElementById('products').getElementsByTagName('div');
97 var tabItem = tab.getElementsByTagName('li'); // 这句是约束在选项卡(tab) 里通过标签名查找li
98 // 接着往后书写逻辑,
99 // tab栏效果上方功能需求的描述。
100 // 鼠标移入后,排他思想,选择当前选择卡 (前提是选项卡与产品内容页数相同)
101 for (var i = 0 ; i < tabItem.length ; i++) {
102 tabItem[i].index = i;
103 tabItem[i].onmouseover = function () {
104 // 排他思想
105 for(var j = 0 ; j < tabItem.length ; j++) {
106 tabItem[j].className = "tab-item";
107 divBoxs[j].className = "main";
108 }
109 // 选中当前选项卡
110 this.className = "tab-item active";
111 // 选择产品内容页
112 divBoxs[this.index].className = "main selected";
113 }
114 }
115
116
117
118 </script>