<!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. 面试经典：链表中倒数第k个结点？如何从大量数据中找出高频词？

    记录两道面试题: 题目描述: 输入一个链表,输出该链表中倒数第k个结点.(单向链表) 拿到这个问题的时候自然而然会想到让链表从末尾开始next   K-1 次不就是第K-1个节点了么,但是必须要注意一 ...

  2. shell变量替换扩展 变量测试

  3. 界面设计微信小程序

    上一个周期将微信小程序的程序编完了,虽然还有很多需要修改的地方,大体已经完成.剩下的边角料以后再弄 这个周期来学习一下微信小程序的设计....好吧. 首先还是需要看一下微信的设计指南的.地址 http ...

  4. Django之template操作

    一.模板渲染的原理 (一)使用 模板渲染首先有一个模板对象Template,然后有一个上下文对象Context,通过render方法进行渲染,最后返回字符串,render方法的本质还是调用了HttpR ...

  5. Kafka速览

    一.基本结构 三台机器组成的Kafka集群,每台机器启动一个Kafka进程,即Broker 向broker发送消息的客户端是Producer,拉取消息的客户端是Consumer Producer和Co ...

  6. Delphi 打印纸张选项设置参数

    { paper selections } {$EXTERNALSYM DMPAPER_LETTER} DMPAPER_LETTER = 1; { Letter 8 12 x 11 in } {$EXT ...

  7. Dataphin支持哪些数据源

    业务数据存储是业务系统最基本的构成,构建数据中台,就是要将这些数据集中起来放到一个有更强算力的地方集中处理,所以对于数据集成的能力是构建数据中台最基本要求: 从存储的发展历程来看,由于不同的业务场景需 ...

  8. 函数计算工具链新成员 —— Fun Local 发布啦

    刚刚,我们发布了函数计算工具链的新成员,Fun Local.欢迎大家使用! 如果你还不了解 Fun 是什么,我们来简单解释下. Fun 是什么 Fun 是 have Fun with Serverle ...

  9. Shiro学习（23）多项目集中权限管理

    在做一些企业内部项目时或一些互联网后台时:可能会涉及到集中权限管理,统一进行多项目的权限管理:另外也需要统一的会话管理,即实现单点身份认证和授权控制. 学习本章之前,请务必先学习<第十章 会话管 ...

  10. 深入浅出 Vue.js 第九章 解析器---学习笔记

    本文结合 Vue 源码进行学习 学习时,根据 github 上 Vue 项目的 package.json 文件,可知版本为 2.6.10 解析器 一.解析器的作用 解析器的作用就是将模版解析成 AST ...