<!DOCTYPE html>

 <html>

     <head>

         <meta charset="UTF-8">

         <title></title>

         <style>

             * {

                 margin: 0;

                 padding: 0;

                 border: none;

             }

             ul, li {

                 list-style: none;

             }

             #box {

                 width: 500px;

                 height: 400px;

                 margin: 20px auto;

             }

             #list1 {

                 height: 26px;

             }

             #list1 li {

                 width: 30px;

                 height: 26px;

                 line-height: 26px;

                 float: left;

                 background: #ddd;

                 padding: 0 10px;

                 cursor: pointer;

             }

             #list1 li.hover{

                 background: #ABCDEF;

                 color: white;

             }

             #list2 {

                 width: 480px;

                 height: 320px;

                 background: #abcdef;

                 padding: 10px;

             }

             #list2 li, #list2 img {

                 width:480px;

                 height: 320px;

             }

         </style>

     </head>

     <body>

         <div id="box">

             <ul id="list1">

                 <li class= "hover">tab1</li>

                 <li>tab2</li>

                 <li>tab3</li>

             </ul>

             <ul id="list2">

                 <li><img src="data:images/11.jpg"/></li>

                 <li><img src="data:images/22.jpg"/></li>

                 <li><img src="data:images/33.jpg"/></li>

             </ul>

         </div>

         <script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script>

         <script type="text/javascript">

             $(function () {

                 //第一张图片 显示，其他隐藏

                 $("#list2").find("li").first().show().siblings().hide();

                 //移入

                 $("#list1 li").mouseenter(function () {

                     $(this).addClass("hover").siblings().removeClass("hover");

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

                     $("#list2 li").eq(index).show().siblings().hide();

                 });

             })

         </script>

     </body>

 </html>

jq-demo-tab切换的更多相关文章

  1. js或者jq的tab切换

    <!DOCTYPE html><html><head><meta http-equiv="Content-Type" content=&q ...

  2. jq写tab切换

    $('.index-news-sub-box ul li').click(function(){ var i=$(this).index(); var img=$('.index-news-img-b ...

  3. 关于scrollintoview()真的是有意思极了，结合普通tab切换一起看看

    scrollIntoView(alignWithTop) 是html5新特性中的一个元素,他主要是指滚动浏览器窗口或容器元素,以便在当前视窗的可见范围看见当前元素. alignWithTop是true ...

  4. jq 折面板+tab切换（自己封装的插件哦！！）

    如上图所示的一个折面板效果+tab切换:最重要的js代码如下: 对于布局简单介绍下: hot_wrap_li 这个是带箭头的横条: Arrow 这个是箭头的div:hot_wrap_li_wrap 这 ...

  5. 谈谈一些有趣的CSS题目（八）-- 纯CSS的导航栏Tab切换方案

    开本系列,谈谈一些有趣的 CSS 题目,题目类型天马行空,想到什么说什么,不仅为了拓宽一下解决问题的思路,更涉及一些容易忽视的 CSS 细节. 解题不考虑兼容性,题目天马行空,想到什么说什么,如果解题 ...

  6. 基于zepto的H5/移动端tab切换触摸拖动加载更多数据

    以前实现移动端的滑动加载更多实现的方法是当滚动条快到页面底部时就自动加载更多的数据,在这方面很多人都用的是"西门的后花园"写的一个叫dropload的插件,这个插件用起来也很好,很 ...

  7. jquery实现tab切换完整代码

    代码如下,保存到html文件打开: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" " ...

  8. tab切换-2016.6.4

    以前的tab切换,一般都是自己找网上的源代码,不知道含义,直接套,然后会有一些不知道的问题出现. 最近学习了jq(当然属于懒人的我,学习进度很慢),然后再工作中遇到了tab选项卡,所以决定自己写一个. ...

  9. 【原】react做tab切换的几种方式

    最近搞一个pc端的活动,搞了一个多月,甚烦,因为相比于pc端,更喜欢移动端多一点.因为移动端又能搞我的react了. 今天主要总结一下react当中tab切换的几种方式,因为tab切换基本上都会用到. ...

  10. Android Studio精彩案例(二)《仿微信动态点击底部tab切换Fragment》

    转载本专栏文章,请注明出处,尊重原创 .文章博客地址:道龙的博客 现在很多的App要么顶部带有tab,要么就底部带有tab.用户通过点击tab从而切换不同的页面(大部分情况时去切换fragment). ...

随机推荐

  1. 路过--<全世界谁倾听你>

    这首歌大概就是说男生和女生分手了男生一直忘不了女生给他带来的感觉(那种只有那个女生才能给男生带来的喜欢)就算黄昏 还是清晨 男生是男生的清晨 女生是女生的黄昏两个人没有交集了就算雨和歌都停了 风还是会 ...

  2. OpenCV学习笔记 笔记汇总

    转载来源:https://www.cnblogs.com/tonyc/p/6407318.html 今后开始学习OpenCV   1:OpenCV学习笔记 作者:CSDN数量:55篇博文网址:http ...

  3. JNI原理与静态、动态注册

    前言 JNI不仅仅在NDK开发中应用,它更是Android系统中Java与Native交互的桥梁,不理解JNI的话,你就只能停留在Java Framework层.这一个系列我们来一起深入学习JNI. ...

  4. teb教程1

    http://wiki.ros.org/teb_local_planner/Tutorials/Setup%20and%20test%20Optimization 简介:本部分关于teb怎样优化轨迹以 ...

  5. Oracle 五笔码函数

    五笔码 select comm.fun_spellcode_wb('数据库') from dual 结果:ORY 函数 CREATE OR REPLACE FUNCTION COMM.FUN_SPEL ...

  6. webpack devServer配置项的坑

    本文所用webpack版本为4+,阅读本章的同学请注意区分. webpack默认不需要配置文件 但是你仍可在项目的node_module目录同级目录建立一个webpack.config.js文件进行配 ...

  7. shell脚本之用户管理

    #!/usr/bin/env bash ############################### # 脚本名称 : userManager.sh # # 脚本功能 : 账号管理 # # 脚本参数 ...

  8. HTML之web项目的目录结构

    文件夹树注解 htmls    html一个文件放除去index.html外的其他页面文件. imgs    存放所有的图片文件:.png..jpg..jpeg.壁纸等. 示例:icon.png.ho ...

  9. Android中的RelativeLayout中组件的排放问题

    今天想仿照新浪微博的用户中心 主要就是那个头像的问题,这个看到就想到用相对布局,现在是我想把那个名称放到头像的上面去xml中定义如下: <RelativeLayout android:layou ...

  10. Shell基础(四)：字符串截取及切割、字符串初值的处理、基使用Shell数组、expect预期交互、使用正则表达式

    一.字符串截取及切割 目标: 使用Shell完成各种Linux运维任务时,一旦涉及到判断.条件测试等相关操作时,往往需要对相关的命令输出进行过滤,提取出符合要求的字符串. 本案例要求熟悉字符串的常见处 ...