<!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. MySQL锁机制浅析

    MySQL使用了3种锁机制 行级锁,开销大,加锁慢,会出现死锁,发生锁冲突的概率最高,并发度也最高 表级锁,开销小,加锁快,不会出现死锁,发生锁冲突的概率最低,并发度最低 页级锁,开销和加锁时间界于表 ...

  2. SecureCRT无法删除和退格的解决办法

    一   选项中,设置自动保存 二   选项=>会话选项 选择linux终端.然后在映射键中,选择delete 等映射信息

  3. [网络流24题] 洛谷P2761 软件补丁问题

    题意:某公司发现其研制的一个软件中有 n个错误,随即为该软件发放了一批共 m 个补丁程序.对于每一个补丁 i ,都有 2 个与之相应的错误集合 B1(i)和 B2(i),使得仅当软件包含 B1(i)中 ...

  4. linux 重启mysql redis等服务器

    redis重启 如果是用apt-get或者yum install安装的redis, 可以直接通过下面的命令停止/启动/重启 /etc/init.d/redis-server stop /etc/ini ...

  5. vector 有点麻烦啊 能简单点么？

    #include <iostream> #include <cstdlib> #include <cstring> #include <cstdio> ...

  6. Vuex白话教程第六讲：Vuex的管理员Module（实战篇）

    写在前面 这一讲是 Vuex 基础篇的最后一讲,也是最为复杂的一讲.如果按照官方来的话,对于新手可能有点难以接受,所以想了下,决定干脆多花点时间,用一个简单的例子来讲解,顺便也复习一下之前的知识点. ...

  7. vue 插槽 slot

    <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title> ...

  8. CSS适配，方案

    1.尺寸常用单位:   https://www.cnblogs.com/whitewolf/p/css-em-px-percentage.html px.em.rem.% 2.CSS的长度单位适配方案 ...

  9. leetcode-1053. 交换一次的先前排列

      题目描述: 给你一个正整数的数组 A(其中的元素不一定完全不同),请你返回可在 一次交换(交换两数字 A[i]和 A[j] 的位置)后得到的.按字典序排列小于 A 的最大可能排列. 如果无法这么操 ...

  10. java IO 类概述表

    列举常用的类方便查看,温故知新! byte input byte output character input character output Basic InputStream OutputStr ...