使用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. Android 通过URL获取网络资源

    1.先在AndroidManifest.xml中注册加入访问因特网服务的权限: <uses-permission android:name="android.permission.IN ...

  2. maven Could not find artifact com.** 无法下载原因分析

    1.有时候经常莫名其妙的遇到这个问题:比如在idea重新导入一个新项目,或者在原来的空间里面引入一个新项目.去私服里面查看明明是有的,但是就是下载不下来. 结合网上搜的和自己遇到的,总结原因如下: 1 ...

  3. leetCode题解寻找最短字符路径

    1.题目描述 2.分析 最简单的方案,对每一个字符,向两边寻找. 3.代码 vector<int> shortestToChar(string S, char C) { vector< ...

  4. 6.JXL操作Excel

    一.简介 jxl是一个韩国人写的java操作excel的工具, 在开源世界中,有两套比较有影响的API可 供使用,一个是POI,一个是jExcelAPI.其中功能相对POI比较弱一点.但jExcelA ...

  5. [IIS] 配置PHP的过程与坑

    * 32位与64位程序的兼容性问题 如果64位的IIS内的处理程序需要使用32位程序或者扩展,必须在ApplicationPool里面的高级设置里,将AppPool设置为允许32位.否则32位的程序将 ...

  6. 使用django的admin的后台管理界面

    django的admin后台管理界面是方便我们对数据库操作的  是一个在浏览器显示的  图形化界面数据库操作 我们先在django中的admin中把我们需要在图形化界面中进行操作的表导入进去: 先把m ...

  7. Linux 系统的/var目录

    /var目录主要针对常态性变动的文件,包括缓存(cache).登录档(log file)以及某些软件运作所产生的文件 /var目录下的重要目录 目录 应放置文件内容 /var/cache/ 应用程序本 ...

  8. CSS背景图片垂直居中center不起效果完美解决

    背景图片居中CSS如下 background:#4892fe url("<%=basePath%>/img/login_bg.jpg") no-repeat cente ...

  9. 服务器安装LNMP及构建个人站点

    服务器安装LNMP(centos6.6+nginx1.7.12+mysql5.6.24+php5.6.7) 本次安装  centos6.6+nginx1.7.12+mysql5.6.24+php5.6 ...

  10. 处理过期的archivelog和rman备份

    当手工删除了归档日志以后,Rman备份会检测到日志缺失,从而无法进一步继续执行.所以此时需要手工执行crosscheck过程,之后Rman备份可以恢复正常.[执行顺序如下:手工删除archivelog ...