<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. swust oj 1068

    图的按录入顺序深度优先搜索     5000(ms)         10000(kb)   Tags: 深度优先     图的深度优先搜索类似于树的先根遍历,即从某个结点开始,先访问该结点, 然后深 ...

  2. swiper嵌套小demo(移动端触摸滑动插件)

    swiper(移动端触摸滑动插件) tip:自己敲得Swiper 的小demo,可以复制粘贴看看效果哦. swiper的js包css包下链接地址 :  https://github.com/Clear ...

  3. 细说一下position（定位），以及其他的小知识

    细说:position      位置 1.只要使用定位,必须要有一个相对的参照物.relative 2.具体定位的那个1元素需要加position:absolute:绝对的 绝对的:就是具体到某一个 ...

  4. PowerPoint使用技巧

    1.右键Group两个元素,可以一起移动: 2.Insert 屏幕输入功能: 3.录制旁白: 4.录制完旁白之后可以生成视频: 5.如果不确定所有引用的组件是否可以在别的机器上使用,可以导出只CD,生 ...

  5. 目标检测（三）Fast R-CNN

    作者:Ross Girshick 该论文提出的目标检测算法Fast Region-based Convolutional Network(Fast R-CNN)能够single-stage训练,并且可 ...

  6. 002-自定义打开terminal,以及快捷键，其他程序类似，ssh管理-sshpass, Shuttle

    一.利用Automator软件完成服务设定 1.使用Command+Space,打开Spotlight,搜索Automator 2.搜索到之后,双击打开,选择“服务[或快速操作]” 3.将“服务收到[ ...

  7. 【JVM】-NO.115.JVM.1 -【JDK11 HashMap详解-4-伸展树、B树】

    .Style:Mac Series:Java Since:2018-09-10 End:2018-09-10 Total Hours:1 Degree Of Diffculty:5 Degree Of ...

  8. 高并发架构系列：MQ消息队列的12点核心原理总结

    消息队列已经逐渐成为分布式应用场景.内部通信.以及秒杀等高并发业务场景的核心手段,它具有低耦合.可靠投递.广播.流量控制.最终一致性 等一系列功能. 无论是 RabbitMQ.RocketMQ.Act ...

  9. python 爬虫-2

    小白新手完全不懂的什么,还有一个robots.txt限制文件,稀里糊涂的    还是百度   可以看一下:http://www.baidu.com/robots.txt 里面会有一些限制,常见的一些配 ...

  10. debug调试命令