<!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. 看过这些我明白了依赖注入及IoC

    背景 最近一段时间在学习laravel框架,了解到这个框架一个比较核心的概念就是服务容器,而服务容器似乎又和依赖注入有关系.但是碍于官方关于这方面的讲解篇幅过少,所以自学了一下. 自学的途径也跟大家一 ...

  2. ElasticSearch中分词器组件配置详解

    首先要明确一点,ElasticSearch是基于Lucene的,它的很多基础性组件,都是由Apache Lucene提供的,而es则提供了更高层次的封装以及分布式方面的增强与扩展. 所以要想熟练的掌握 ...

  3. Shell内置命令——declare

  4. PHP-全排列

    给定一个没有重复数字的序列,返回其所有可能的全排列. 示例: 输入: [1,2,3]输出:[ [1,2,3], [1,3,2], [2,1,3], [2,3,1], [3,1,2], [3,2,1]] ...

  5. MySQL中可能遇到的问题及解决方法

    一.在创建存储函数时,出现错误: ERROR 1418 (HY000): This function has none of DETERMINISTIC, NO SQL, or READS SQLDA ...

  6. 同步类容器和并发类容器——ConcurrentMap、CopyOnWrite、Queue

     一 同步类容器同步类容器都是线程安全的,但在某些场景中可能需要加锁来保证复合操作. 符合操作如:迭代(反复访问元素,遍历完容器中所有元素).跳转(根据指定的顺序找到当前元素的下一个元素).条件运算. ...

  7. vue中watch简单使用

    watch是一个对象,具有键值对:键指被监听的数据,值指处理方式. 值类型包括以下三个: 第一个handler:其值是一个回调函数.即监听到变化时应该执行的函数. 第二个是deep:其值是true或f ...

  8. linux给用户赋予root权限

    1.到/etc目录下 2.使用 vi sudoers 3.将username添加到sudoers

  9. JAVA调用R脚本 windwos路径下

    RConnection c = new RConnection();// REXP x = c.eval("source('D:\\\\jiaoben\\\\RJava_test.R',en ...

  10. CSS：CSS Positioning(定位)

    ylbtech-CSS:CSS Positioning(定位) 1.返回顶部 1. CSS Positioning(定位) position 属性指定了元素的定位类型. position 属性的四个值 ...