jQuery----jquery实现Tab键切换

使用Jquery实现tab键切换，代码简洁易懂，实现逻辑清晰明了。具体总结如下：

 

需求分析：

鼠标进入tab切换模块，鼠标当前的模块上边框变为红色，并显示对应的商品名称。鼠标离开后，上边框恢复原色，图片改变。

 

 

实现效果如下：

页面1：

页面2

页面3

页面4

 

 

页面结构分析：

1.使用大盒子wrapper控制整个内容在页面的位置

2.大盒子中分ul（tab）和div（product）两部分

3.ul（tab）使用四个li标签分别存储四个模块

4.每个li中包括板块名字和标签，通过标签的属性，设置四个板块之间的分割线，这个是知识点。

5.div（product）中用以存储图片，初始显示隐藏，只留一个图片。

 

 

代码如下：

  1 
  2 
  3     
  4         
  5         
  6         
 61         
 62         
 63         
 64         
 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 

 

 

备注：使用Jquery实现效果很简单，前面博文有总结，本文的重点在于网页布局，尤其是切换栏各个模块之间的竖线，应该弄懂是如何做出来的。

 

转载于:https://www.cnblogs.com/WangYujie1994/p/10282734.html