<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. Linux命令 sed

    一. 以行为单位进行操作. d:删除 $ nl passwd | sed '2,5d'  # 删除第2~5行 $ nl passwd | sed '2d'  # 删除第2行 $ nl passwd | ...

  2. layui中的submit提交本地数据在控制在输出为空数组(解决)

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

  3. springboot 2.0部署到Tomat8.5上

    1.改jar为war 2.改下打包的名字 3.删掉tomcat的webapps下面的所有文件夹.将打好的jar包放入到webapps下 4.运行tomcat,双击shutdown.bat 注意: sp ...

  4. LaTeX大于小于号

    发现大部分人只回答大于等于号.小于等于号的写法,而没有说大于.小于号的分别写法. 大于号:\textgreater 小于号: \textless 下面的后面要加空格,否则会识别错误 大于等于:\geq ...

  5. 面试题----入参两个Integer，无返回值，然后使这个两个值在调用函数后交换

    我最近看到过一个比较好玩的面试题. 写个方法,入参两个Integer,无返回值,然后使这个两个值在调用函数后交换 很有意思的一个题目,引发我的深思,根据一路的学习过来,下面把实现代码贴出来,方便学习. ...

  6. java框架之MyBatis(2)-进阶&整合Spring&逆向工程

    进阶内容 准备 jdbc.url=jdbc:mysql://192.168.208.192:3306/test?characterEncoding=utf-8 jdbc.driver=com.mysq ...

  7. linux下查看CPU、内存、磁盘信息

    1.查看CPU信息# 总核数 = 物理CPU个数 X 每颗物理CPU的核数 # 总逻辑CPU数 = 物理CPU个数 X 每颗物理CPU的核数 X 超线程数 # 查看物理CPU个数cat /proc/c ...

  8. 【UML】NO.53.EBook.6.UML.2.001-【Thinking In UML 大象 第二版】- 概述

    1.0.0 Summary Tittle:[UML]NO.53.EBook.6.UML.2.001-[Thinking In UML 大象 第二版]- 概述 Style:DesignPattern S ...

  9. docker centos 老是退出

    1. 使用docker 镜像可以加快拉去.操作系统的使用第二种格式. 您可以使用以下命令直接从该镜像加速地址进行拉取: $ docker pull registry.docker-cn.com/myn ...

  10. swagger：API在线文档自动生成框架

    传统的API从开发测试开始我们经常借用类似Postman.fiddle等等去做接口测试等等工具:Swagger 为API的在线测试.在线文档提供了一个新的简便的解决方案: NET 使用Swagger ...