<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 中的关系运算符

    php中的关系运算符有:&&(and).||(or).xor(亦或).!(非). 名称 关系 示例 结果 and 与 $x and $y 如果 $x 和 $y 都为 true,则返回 ...

  2. vue2.0 源码解读(一)

    又看完一遍中文社区的教程接下来开始做vue2.0的源码解读了! 注:解读源码时一定要配合vue2.0的生命周期和API文档一起看 vue2.0的生命周期分为4主要个过程 create. 创建---实例 ...

  3. 1.7Oob 静态成员

    1)public class Exse3 { static int iCounter = 0; String name; boolean bGender = false; int iAge; doub ...

  4. HTML 5 拖放 drag dragend dragover ....

    拖放(Drag 和 drop)是 HTML5 标准的组成部分. // http://www.w3school.com.cn/html5/html_5_draganddrop.asp dataTrans ...

  5. 记一次ADG备库归档目录满导致的延时处理

    报错如下,原因是存放传过来的归档的目录+HWAREDODG满了,MRP进程无法应用归档,我在手动传了几个归档之后发现不是GAP,select * from V$ARCHIVE_GAP 显示没有GAP. ...

  6. Python字符串拼接的6种方法（转）

    add by zhj: 对于多行字符串连接,第6种连接方法很方便,连接时不会添加额外的空格. 原文:http://www.cnblogs.com/bigtreei/p/7892113.html 1. ...

  7. 5、jeecg 笔记之 minidao 条件判断

    1.前言  我们知道 mybatis 中的动态sql语句是基于 OGNL 表达式的.  额外补充一点:mybatis 中的 #{} 和 ${} ,可直接跳过.   #{}表示一个占位符号,#{}接收输 ...

  8. PowerBI更新 - 解决方案架构 - PowerBI Solution Architecture（一图胜万字！）

    2019/04更新 参见这里 今天发福利啦!发福利啦!发福利啦! 企业的各种数据整合到PowerBI显示,浏览器,移动端显示关键指标. 一个很好的PowerBI解决方案的图!一图胜万字!你所需要知道的 ...

  9. Python openpyxl、pandas操作Excel方法简介与具体实例

    本篇重点讲解windows系统下 Python3.5中第三方excel操作库-openpyxl: 其实Python第三方库有很多可以操作Excel,如:xlrd,xlwt,xlwings甚至注明的数据 ...

  10. st2_057

    http://vulapps.evalbug.com/s_struts2_s2-057/ 这大概是全网复现st2-057环境最简单的操作了. 不过首先,你需要安装过docker,安装方法参考官方文档h ...