使用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. JS数组与对象的遍历方法大全

    本文简单解析各种数组和对象属性的遍历方法: 原生for循环.for-in及forEach ES6 for-of方法遍历类数组集合 Object.key()返回键名的集合 jQuery的$.each() ...

  2. ETH智能合约测试

    ETH的智能合约一般用Solidity语言编写,懂点基本solidity语法会更好地测试 测试中需要用到的工具: 一份智能合约 Remix(一个在线IDE,用来编译.编辑.部署智能合约,需要FQ才能使 ...

  3. leveldb源码分析--插入删除流程

    由于网络上对leveldb的分析文章都比较丰富,一些基础概念和模型都介绍得比较多,所以本人就不再对这些概念以专门的篇幅进行介绍,本文主要以代码流程注释的方式. 首先我们从db的插入和删除开始以对整个体 ...

  4. [WSUS] [Windows 10 Upgrade 1607/1703] 升级出错，出现 0xC1800118 或者卡在下载中…… 0%后失败

    1. 安装 KB3159706 ,并进行安装后维护操作:https://support.microsoft.com/en-us/help/3159706/update-enables-esd-decr ...

  5. 关于springMVC的一些常用注解

    ①:@RequestMapping("/helloworld").@RequestMapping(value="/emp", method=RequestMet ...

  6. 1. 跟踪标记 (Trace Flag) 1117, 1118 文件增长及空间分配方式

    跟踪标记:1117 功能: 默认,同一个文件组下的多个文件,如果某个文件没有可用空间,且设置了自动增长,则该文件自动增长,其他文件大小保持不变: 开启后,同一文件组下的多个文件,如果某个文件没有可用空 ...

  7. [C++] 用Xcode来写C++程序[3] Constants

    用Xcode来写C++程序[3] Constants 以下是一些基本数据的含义: 75 // int 75u // unsigned int 75l // long 75ul // unsigned ...

  8. 封装CoreGraphics的API简化绘图操作

    封装CoreGraphics的API简化绘图操作 效果 说明 1. 将CoreGraphics的API接口抽象为对象,让绘图变得简单易懂 2. 简化常用的绘制操作 3. 源码长期更新 源码 https ...

  9. UNIX高级环境编程（6）标准IO函数库 - 流的概念和操作

    标准IO函数库隐藏了buffer大小和分配的细节,使得我们可以不用关心预分配的内存大小是否正确的问题. 虽然这使得这个函数库很容易用,但是如果我们对函数的原理不熟悉的话,也容易遇到很多问题.   1 ...

  10. c++ 数组操作(转)

    转自 http://www.cnblogs.com/kykuaileren/archive/2011/09/04/2166646.html 一.数组定义和初始化 1: 一维数组初始化: 2: 标准方式 ...