jQuery----jquery实现Tab键切换
程序员文章站
2022-05-30 14:57:14
使用Jquery实现tab键切换，代码简洁易懂，实现逻辑清晰明了。具体总结如下： 需求分析： 鼠标进入tab切换模块，鼠标当前的模块上边框变为红色，并显示对应的商品名称。鼠标离开后，上边框恢复原色，图片改变。 实现效果如下： 页面1： 页面2 页面3 页面4 页面结构分析： 1.使用大盒子wrapp ......
使用jquery实现tab键切换，代码简洁易懂，实现逻辑清晰明了。具体总结如下：
需求分析：
鼠标进入tab切换模块，鼠标当前的模块上边框变为红色，并显示对应的商品名称。鼠标离开后，上边框恢复原色，图片改变。
实现效果如下：
页面1：
页面2
页面3
页面4
页面结构分析：
1.使用大盒子wrapper控制整个内容在页面的位置
2.大盒子中分ul（tab）和div（product）两部分
3.ul（tab）使用四个li标签分别存储四个模块
4.每个li中包括板块名字和<span></span>标签，通过<span></span>标签的属性，设置四个板块之间的分割线，这个是知识点。
5.div（product）中用以存储图片，初始显示隐藏，只留一个图片。
代码如下：
1 <!doctype html>
2 <html>
3 <head>
4 <meta charset="utf-8">
5 <title></title>
6 <style type="text/css">
7 *{
8 padding: 0px;
9 margin: 0px;
10 }
11 ul{
12 list-style: none;
13 }
14 .wrapper{
15 margin: 100px auto;
16 width: 1000px;
17 height: 512px;
18 }
19 .tab{
20 height: 37px;
21 width: 316px;
22 border: 1px solid gray;
23 border-bottom: 0;
24 }
25 .tab li{
26 float: left;
27 width: 79px;
28 text-align: center;
29 height: 33px;
30 line-height: 33px;
31 position: relative;
32 right: 0px;
33 border-top: 4px solid white;
34 font-size: 14px;
35 }
36 .tab span{
37 position: absolute;
38 right: 0px;
39 top: 10px;
40 width: 1px;
41 height: 14px;
42 background-color: gray;
43 display: inline-block;
44 }
45 .product{
46 border: 1px solid gray;
47 width: 1000px;
48 height: 475px;
49 }
50 .product div{
51 display: none;
52 }
53 .tab li.active{
54 border-color: red;
55 }
56 .product div.select{
57 display: block;
58 }
59
60 </style>
61
62 <script src="js/jquery-1.12.2.js" type="text/javascript" charset="utf-8"></script>
63 <!-- 插入jquery代码 -->
64 <script type="text/javascript">
65 $(function(){
66 //鼠标移入各个li,当前所在的li的上边框变成红色
67 $(".tab>li").mouseover(function(){
68 //所有的li取消active样式
69 $(this).siblings("li").removeclass("active");
70
71 //当前li添加active样式
72 $(this).addclass("active");
73
74 //显示对应当前li的div
75 var index=$(this).index();
76 //所有的div取消select样式
77 $(".product>div").removeclass("select");
78 $(".product>div:eq("+index+")").addclass("select");
79 });
80 });
81 </script>
82 </head>
83 <body>
84 <div class="wrapper">
85 <ul class="tab">
86 <li class="active">国际大牌<span></span></li>
87 <li>国妆名牌<span></span></li>
88 <li>清洁用品<span></span></li>
89 <li>男士精品</li>
90 </ul>
91
92 <div class="product">
93 <div class="select">
94 <a href="#"><img src="images/guojidapai.jpg" ></a>
95 </div>
96 <div >
97 <a href="#"><img src="images/guozhuangmingpin.jpg" ></a>
98 </div>
99 <div>
100 <a href="#"><img src="images/nanshijingpin.jpg" ></a>
101 </div>
102 <div>
103 <a href="#"><img src="images/qingjieyongpin.jpg" ></a>
104 </div>
105 </div>
106 </div>
107 </body>
108 </html>
备注：使用jquery实现效果很简单，前面博文有总结，本文的重点在于网页布局，尤其是切换栏各个模块之间的竖线，应该弄懂是如何做出来的。