<html>

<head>

<meta charset="UTF-8">

<title>选项卡</title>

<script type="text/javascript" src="jquery-1.10.2.min.js"></script>

</head>

<style>

.tab{width:400px;height:400px;border:1px solid red;}

.tab-menu{height:100px;width:400px;border:1px solid grey;}

.tab-menu ul{list-style:none;}

.tab-menu li{display:block;width:30%;float:left;border:1px solid blue;}

.tab-box div{width:400px;height:300px;border:1px solid #ff4200;display:none;}

/* 让第一个框显示出来 */

.tab-box div:first-Child{display:block;}

/* 改变选项卡选中时候的样式 */

.change{background:red;}

</style>

<script>

$().ready(function(){

    $(".tab-menu li").mouseover(function(){

    //通过 .index()方法获取元素下标，从0开始，赋值给某个变量

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

    //让内容框的第 _index 个显示出来，其他的被隐藏

        $(".tab-box>div").eq(_index).show().siblings().hide();

    //改变选中时候的选项框的样式，移除其他几个选项的样式

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

    });

});

</script>

<body>

    <div class="tab">

        <div class="tab-menu">

            <ul>

                <li>新服</li>

                <li>爆服</li>

                <li>大服</li>

            </ul>

        </div>

        <div class="tab-box">

            <div>123</div>

            <div>456</div>

            <div>789</div>

        </div>

    </div>

</body>

</html>

Jquery实现简单选项卡的更多相关文章

  1. Jquery&JS简单选项卡

    结果,如图 为了明显,用绿色+红色 第一步:静态布局 先写html代码和css样式 要点一:  ul li都为块级元素,可以用height,但是里面字体不居中,我们用line-height,即达到居中 ...

  2. jQuery实例-简单选项卡-【一些常见方法（2）-练习】

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  3. jQuery实现TAB选项卡切换特效简单演示

    本文实例为大家分享jQuery实现TAB选项卡切换特效,供大家参考,具体内容如下 1.tab切换 on ? 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 1 ...

  4. js进阶 11-24 jquery如何实现选项卡的制作

    js进阶 11-24 jquery如何实现选项卡的制作 一.总结 一句话总结:ul>li做选项卡的选项卡头,多个div做选项卡的内容,点到对应的li,就切换到对应的div,用index()获取l ...

  5. 使用jQuery开发tab选项卡插件

    为了复习巩固jQuery的插件开发.HTML和CSS方面的知识,做了一个简单的tab选项卡插件,简单记录一下开发.使用的过程,以备日后使用. 一.插件效果 tab选项卡插件常用的功能均已实现,包括:动 ...

  6. jquery实现简单瀑布流布局（续）：图片懒加载

    # jquery实现简单瀑布流布局(续):图片懒加载 这篇文章是jquery实现简单瀑布流布局思想的小小扩展.代码基于前作的代码继续完善. 图片懒加载就是符合某些条件时才触发图片的加载.最常见的具体表 ...

  7. jquery实现简单瀑布流布局

    jquery实现简单瀑布流布局 是开头都会说的原理 瀑布流布局有两种,一种是固定列,一种是非固定列.在此主要记述第一种的实现. 固定列的特征是:无论页面如何缩放,每行的总列数都一致. 一行4列的瀑布流 ...

  8. Javascript对象、Jquery扩展简单应用

    Javascript对象,表现方式一: person = new Object(); person.firstname = "An"; person.lastname = &quo ...

  9. 基于jQuery打造的选项卡向上弹出jquery焦点图切换特效

    基于jQuery打造的选项卡向上弹出jquery焦点图切换特效 鼠标经过标题栏,会出现层特效向上滑动,并且在同时进行幻灯片切换,效果十分不错. 有兴趣的童鞋可以下载看看,在IE6方面兼容性也不错,只有 ...

随机推荐

  1. 最新版的Chrome不能设置网页编码怎么解？

    添加一个Google插件https://chrome.google.com/webstore/detail/set-character-encoding/bpojelgakakmcfmjfilgdlm ...

  2. redis数据库通过dump.rdb文件恢复数据库或者数据库迁移

    环境:centos7.2软件:redis-3.2.10(yum安装) 情景一:公司之前的redis没有开启aof模式,一直是rdb模式,但是数据又非常重要,数据一点也不能丢失,所以需要开启aof,但是 ...

  3. JavaScript基础知识（数组的方法）

    数组的方法(15个) 对象数据类型: 数组成员有一个与之对应的索引 length : 代表数组成员的个数: 操作改变数组一些方法:这些数组的方法都是内置的: // 1. 方法作用: // 2. 方法的 ...

  4. sql中join与left-join图解区别

      select a.* from YG_BRSYK a left join(SELECT DISTINCT SYXH, STUFF((SELECT '.'+MS FROM #lsb where SY ...

  5. I2C驱动框架 （kernel-3.4.2）

    先用韦老师的图: 注:  新版本内核的i2c驱动框架采用了    i2c_client -------> i2c_bus_type  <-------- i2c_driver   框架 如 ...

  6. python类型错误：'NoneType' object is not subscriptable

    TypeError: 'NoneType' object is not subscriptable --> 原因:变量使用了系统内置的关键字list 解决:重新定义下这个变量

  7. 经典的PHPer为什么被认为是草根？

    PHPer是草根吗? 从PHP诞生之日起,PHP就开始在Web应用方面为广大的程序员服务.同时,作为针对Web开发量身定制的脚本语言,PHP一直秉承简单.开源的思想,这也使得PHP得以快速的发展,并且 ...

  8. 利用StateListDrawable给button动态设置背景

    项目中,遇到相同样式的Button,只是stroke颜色不一样.为了实现一个,就得写两个shape文件,一个selector文件:多个还得重复写. 解决方法: 结合StateListDrawable给 ...

  9. C#设计模式(2)——简单工厂模式（转）

    C#设计模式(2)——简单工厂模式   一.引言 这个系列也是自己对设计模式的一些学习笔记,希望对一些初学设计模式的人有所帮助的,在上一个专题中介绍了单例模式,在这个专题中继续为大家介绍一个比较容易理 ...

  10. 《linux就该这么学》第十节课：第8章iptables和firewalld

            网卡配置: 物理机:192.168.10.1/24 服务器:192.168.10.10/24 客户端:192.168.10.20/24         1.vim  /etc/sysc ...