<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. PHP（表单元素）

    表单: 1.收集用户的输入,发送到后台 <form action="后台地址" method="提交方式" enctype="multipart ...

  2. Qt带返回值的信号发射方式（使用QMetaObject::invokeMethod）

    一般来说,我们发出信号使用emit这个关键字来操作,但是会发现,emit并不算一个调用,所以它没有返回值.那么如果我们发出这个信号想获取一个返回值怎么办呢? 两个办法:1.通过出参形式返回,引用或者指 ...

  3. 使用hashlib进行登录校验

    注册登录和密码验证 用户注册时,文件中保存用户名,和密码的密文 登录时,密码与文件中的密文进行比较,如果相同就同意登录 import hashlib # 导入模块 def md5(username,p ...

  4. tarjan代码

    还有五天就是NOIP2018了……本蒟蒻还要复习期中考试,因此实在没有时间写博客了(各种找借口).这里就放一下代码 //Tarjan缩点 //题目描述:给一个有向图.每个点有一个权值,求权值和最大的路 ...

  5. 2、jeecg 笔记之 t:dictSelect 或 t:dgCol 自定义字典

    1.需求 先说一下需求场景吧,我们知道 jeecg 中提供了下拉,其中包含两种使用场景: 一种是直接通过 t:dictSelect 使用,再就是 t:dgCol  用于表头的列表工具条标签: 总之就是 ...

  6. java框架之Spring(2)-注解配置IOC&AOP配置

    注解配置IoC 准备 1.要使用注解方式配置 IoC,除了之前引入的基础 jar 包,还需要引入 spring-aop 支持包,如下: 2.在 applicationContext.xml 中引入 c ...

  7. python之requests模块快速上手

    安装 pip3 install requests 使用 发送请求 import requests r = requests.get('http://www.baidu.com') 还可以如下方式发送不 ...

  8. linux----------阿里云服务器使用过程中遇到的各种问题以及解决渠道

    1.Windows Server 2012 R2 或 2016 无法安装 .NET Framework 3.5.1:  https://help.aliyun.com/knowledge_detail ...

  9. Exercise about Shape

    #include <iostream> using namespace std; class point { int x; int y; public : point () { x=y=; ...

  10. web前端学习历程--跨域问题

    一.同源策略 一个页面的ajax只能获取这个页面相同源(协议.域名.端口号都必须相同)的数据. 二.jsonp方法 1.json和jsonp JSON(JavaScript Object Notati ...