使用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）中用以存储图片，初始显示隐藏，只留一个图片。

代码如下：

 <!DOCTYPE html>

 <html>

     <head>

         <meta charset="utf-8">

         <title></title>

         <style type="text/css">

             *{

                 padding: 0px;

                 margin: 0px;

             }

             ul{

                 list-style: none;

             }

             .wrapper{

                 margin: 100px auto;

                 width: 1000px;

                 height: 512px;

             }

             .tab{

                 height: 37px;

                 width: 316px;

                 border: 1px solid gray;

                 border-bottom: 0;

             }

             .tab li{

                 float: left;

                 width: 79px;

                 text-align: center;

                 height: 33px;

                 line-height: 33px;

                 position: relative;

                 right: 0px;

                 border-top: 4px solid white;

                 font-size: 14px;

             }

             .tab span{

                 position: absolute;

                 right: 0px;

                 top: 10px;

                 width: 1px;

                 height: 14px;

                 background-color: gray;

                 display: inline-block;

             }

             .product{

                 border: 1px solid gray;

                 width: 1000px;

                 height: 475px;

             }

             .product div{

                 display: none;

             }

             .tab li.active{

                 border-color: red;

             }

             .product div.select{

                 display: block;

             }

         </style>

         <script src="js/jquery-1.12.2.js" type="text/javascript" charset="utf-8"></script>

         <!-- 插入jQuery代码 -->

         <script type="text/javascript">

             $(function(){

                 //鼠标移入各个li,当前所在的li的上边框变成红色

                 $(".tab>li").mouseover(function(){

                     //所有的li取消active样式

                     $(this).siblings("li").removeClass("active");

                     //当前li添加active样式

                     $(this).addClass("active");

                 //显示对应当前li的div

                     var index=$(this).index();

                     //所有的div取消select样式

                     $(".product>div").removeClass("select");

                     $(".product>div:eq("+index+")").addClass("select");

                 });

             });

         </script>

     </head>

     <body>

         <div class="wrapper">

             <ul class="tab">

                 <li class="active">国际大牌<span></span></li>

                 <li>国妆名牌<span></span></li>

                 <li>清洁用品<span></span></li>

                 <li>男士精品</li>

             </ul>

             <div class="product">

                 <div class="select">

                     <a href="#"><img src="data:images/guojidapai.jpg" ></a>

                 </div>

                 <div >

                     <a href="#"><img src="data:images/guozhuangmingpin.jpg" ></a>

                 </div>

                 <div>

                     <a href="#"><img src="data:images/nanshijingpin.jpg" ></a>

                 </div>

                 <div>

                     <a href="#"><img src="data:images/qingjieyongpin.jpg" ></a>

                 </div>

             </div>

         </div>

     </body>

 </html>

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

jQuery----jquery实现Tab键切换的更多相关文章

  1. Qt之Tab键切换焦点顺序

    简介 Qt的窗口部件按用户的习惯来处理键盘焦点.也就是说,其出发点是用户的焦点能定向到任何一个窗口,或者窗口中任何一个部件. 焦点获取方式比较多,例如:鼠标点击.Tab键切换.快捷键.鼠标滚轮等. 习 ...

  2. 【Qt】Qt之Tab键切换焦点顺序【转】

    简介 Qt的窗口部件按用户的习惯来处理键盘焦点.也就是说,其出发点是用户的焦点能定向到任何一个窗口,或者窗口中任何一个部件. 焦点获取方式比较多,例如:鼠标点击.Tab键切换.快捷键.鼠标滚轮等. 习 ...

  3. (转)js控制窗口失去焦点（包括屏蔽Alt+Tab键切换页面）

    本章内容转自:http://www.cnblogs.com/BoKeYuanVinson/articles/3360954.html 转载自网络贴吧: 页面脚本是无法截获alt键的,不过可以变通一下, ...

  4. Unity3D - UGUI实现Tab键切换输入框、按钮（按Tab键切换高亮显示的UI）

    1.在Hierarchy面板创建能被选中的UI(Button.InputField等). 2.在Canvas上创建C#脚本 TabCutPichon. 3.编写脚本. using System.Col ...

  5. html+css+jQuery+JavaScript实现tab自动切换功能

    tab1.html内容 <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> & ...

  6. jQuery 制作的Tab标签切换选项卡

    基于jQuery实现的一个选项卡效果,重点体现在HTML里没有内联事件处理程序,而是定义在js文件里,做到行为与结构的分离.在实际应用过程中,只要保证选项卡模块结构代码的完整性,就可以任意添加N个同类 ...

  7. iOS 自定义的CodeSnippets添加按下tab键切换到指定输入位置

    在需要使用tab来选中并输入内容的地方,添加: <#输入待覆盖的内容#>

  8. gwt CellTable中的控件按Tab键切换

    默认是 cellTable.setKeyboardSelectionPolicy(KeyboardSelectionPolicy.ENABLED); 如果要Tab,则设置为DISABLED; 并将其t ...

  9. [QT] Tab键切换焦点顺序

    在Qt Designer 中点击“编辑Tab顺序“按钮进入编辑Tab顺序模式,如下图: 之后界面会变成这样: 随处点击右键即可弹出菜单,选择  "制表符顺序列表..." 出现 剩下 ...

随机推荐

  1. oracle 分组取第一行数据 ，查询sql语句

    oracle  分组取第一行数据 SELECT * FROM ( SELECT ROW_NUMBER() OVER(PARTITION BY x ORDER BY y DESC) rn, t.* FR ...

  2. this and super

    this 和 super 的区别:this, 先从本类找属性和方法,本类找不到再从父类找.super, 从父类找. this 和 super 都可以调用构造方法,所以this() 和 super() ...

  3. linux安装memcached

    一:为什么要使用memcached 瓶颈:互联网发展,特别在web2.0兴起之后,传统数据库开始出现瓶颈 1:对数据库的高并发读写 2:对海量数据库的处理(海量数据查找)memcache 是高性能的分 ...

  4. npm用法及离线安装方法

    npm用法及离线安装方法 基本的用法 查看某个模块的全部信息,或者可以查看单个信息 npm info name npm info name version npm info name homepage ...

  5. c# 多线程之-- System.Threading Timer的使用

    作用:每隔多久去执行线程里的方法. class ThreadTimerDemo { static void Main(string[] args) { // Create an AutoResetEv ...

  6. HDFS pipeline写 -- datanode

    站在DataNode的视角,看看pipeline写的流程,本文不分析客户端部分,从客户端写数据之前拿到了3个可写的block位置说起. 每个datanode会创建一个线程DataXceiverServ ...

  7. [翻译] SIAlertView

    SIAlertView https://github.com/Sumi-Interactive/SIAlertView An UIAlertView replacement with block sy ...

  8. CMake: Could NOT find PkgConfig

    转自http://www.ogre3d.org/forums/viewtopic.php?f=22&t=78490 Looking for OGRE... Could NOT find Pkg ...

  9. php各种主流框架的优缺点

    ThinkPHP ThinkPHP(FCS)是一个轻量级的中型框架,是从Java的Struts结构移植过来的中文PHP开发框架.它使用面向对象的开发结构和MVC模式,并且模拟实现了Struts的标签库 ...

  10. 高级IO

    # 高级IO 特殊的IO操作,包括文件锁.系统V的流.信号驱动的I/O.多路转I/O(select和pull函数).readv和writev函数以及存贮映射I/O等概念和函数. ## 文件锁 文件锁是 ...