使用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. Hive常用配置

    1.配置hive在HDFS上的根目录位置 <property> <name>hive.metastore.warehouse.dir</name> <valu ...

  2. vo、po、dto、bo、pojo、entity、mode如何区分

    https://blog.csdn.net/qq_41604862/article/details/79675223?utm_source=blogxgwz0

  3. Oracle EBS 附件功能

    SELECT fde.table_name, fde.data_object_code, fdet.user_entity_name, fdet.user_entity_prompt, fat.app ...

  4. MySQL案例07:MySQL5.7并发复制隐式bug

    我们MySQL线上环境大部分使用的是5.7.18的版本,这个版本已修复了很多bug,但针对主从复制的bug还是有很多的,尤其是一些组复制.并行复制的bug尤为突出,在5.7.19版本有做相应改善和修复 ...

  5. 工具-github在linux下面没有git push报错

    time: 2015/12/25 1. 描述: error: The requested URL returned error: 403 Forbidden while accessing https ...

  6. Python实例---CRM管理系统分析180331

    注意:一个项目基本都设计增删改查,且第一个需要做的就是设计表结构 思维导图: 组件使用: Django  +   bootStrap  +   Jquery 数据库表结构设计: 外键关联: 2种方式, ...

  7. MVC中JavaScript和CSS的自动打包与压缩

    在程序中安装System.Web.Optimization程序集 依赖关系如下图所示: 添加BundleConfiguration类 代码如下所示 注意必须使用对应的ScriptBundle和Styl ...

  8. 【Alpha】Daily Scrum Meeting——blog2

    团队成员 吴吉键 201421122007(组长) 魏修祺 201421122008 孙劲林 201421122022 1. 会议当天照片 忘记拍了!(没有拍照片的习惯,没有第四人拍照) 2. 每个人 ...

  9. 评微软收购GitHub

    前段时间,微软正式宣布以75亿美元收购GitHub.除了微软和GitHub以外,也许对这笔并购最在意的,正是微软的同城敌友,亚马逊.在我看来,GitHub也许是微软史上最好的收购. 75亿美元贵不贵? ...

  10. 【转】Json判断是否存在某个属性和遍历各个属性和值

    var field='uid'; var jsonObj={uid:'001'}; 一. jsonObj[field] != undefined //注意:如果field值正好是undefined那就 ...