<!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. C#5.0 异步编程 Async和Await--异步方法的规范和注意事项

    要些异步方法要注意一下几点: 异步方法的返回值有三种: 1.没有任何返回值的void 2.返回一个Task任务的Task,可以获得该异步方法的执行状态 3.返回Task<T> 可以获得异步 ...

  2. htop资源管理器

    htop是linux资源管理器,安装后界面如下图: 当我们用安装yum -y htop时,会报错,这是因为需要安装扩展源 yum -y epel 扩展源 安装完扩展源之后,就可以安装了

  3. 【javascript闭包】转载一篇不错的解释，也有几个大牛的链接

    初学闭包时一直以为很简单.但伴随对一个问题深入学习后,才算真正理解了闭包,同时也发现连<<JavaScript高级程序设计>>中都些不准确的地方. 我不准备从头介绍闭包的概念, ...

  4. linux中的read_link

    readlink是linux系统中一个常用工具,主要用来找出符号链接所指向的位置. readlink 获取当前进程对应proc/self/exe]:shell中  readlink /proc/sel ...

  5. Angularjs书写规范

    文件命名原则: 遵循以描述组件功能,然后是类型(可选)的方式来给所有的组件提供统一的命名 命名:feature.type.js. 测试文件名(feature.type.spec.js) 大多数文件都有 ...

  6. Qt 【Qlistview + delegate 为item重写个关闭按钮】

    效果图是这样的. 实现的过程是listview + delegate 本身我想是用listwidget + delegate[网上查询到不可实现] 之前也试过在item中添加布局跟控件,但是在点击的时 ...

  7. ansible如何用root用户运行普通用户授权

    ansible默认以root用户进行授权,但是需要用普通用户执行一些命令操作: 如: 1. ansible 10.0.0.1 -m raw -a "date" -u www 但是会 ...

  8. Hbase速览

    一.概述 理解为hadoop中的key-value存储,数据按列存储,基于HDFS和Zookeeper 1.应用 2.场景 适用场景: 存储格式:半结构化数据,结构化数据存储,Key-Value存储 ...

  9. springCloud参考资料

    官网: http://spring.io/projects/spring-cloud 各组件说明(中文版):https://springcloud.cc/spring-cloud-netflflix. ...

  10. 快速求排列C（m，n）加取模

    快速求排列组合C(m,n)%mod 写在前面: 1. 为防止产生n和m的歧义,本博文一律默认n >= m 2. 本博文默认mod = 10^6+3 3. 本博文假设读者已知排列组合公式 C(m, ...