今晚，我们来用实现一个简单的选项卡切换代码，主要代码只有两行。

效果：

思路：通过切换JQuery控制div的显隐和样式的改变

　　　其中那个一个div显示，其余全隐藏

实现：

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>Document</title>

        <style>

        *{margin:0;padding:0;}

        #content{

            width: 200px;

            height: 200px;

            border:1px solid #ccc;

            overflow: hidden;

            margin-top: -1px;

        }

        button{

            border:1px solid #ccc;

            outline:none;

        }

        .active{

            background: white;

            border-bottom: 1px solid white;

        }

        #content>div{

            width: 200px;

            height: 200px;

        }

    </style>

</head>

<body>

    <button class="active">按钮1</button>

    <button>按钮2</button>

    <button>按钮3</button>

    <div id="content">

        <div>标签页11111</div>

        <div>标签页2222</div>

        <div>标签页3333</div>

    </div>

</body>

</html>

<script src="jquery-1.11.3.js"></script>

<script>

$("button").click(function(){

    // 控制样式的改变 当前按钮添加样式，他的同级兄弟全部去除样式

    $(this).addClass('active').siblings().removeClass('active');

    // 控制div的显隐 当前按钮对应的div显示，他的同级兄弟全部隐藏

    $("#content>div").eq($(this).index()).css("display","block").siblings().css("display","none");

})

</script>

简单吧，其实只要思路出来了没什么难的，今天被问这个怎么实现，顺便就写一下。希望能帮到大家

三行Jquery代码实现简单的选项卡的更多相关文章

  1. jquery代码实现简单的五星评价功能！

    实现: 1,鼠标移动到第三个星星,则一二三星星变亮,后两个变暗 2,鼠标点击某个星星后,可以继续选择,但拿开后星星会定格住你点击的位置 <script type="text/javas ...

  2. jQuery代码性能小细节

    选择器Selector的使用 $("#id")使用id来定位DOM元素无疑是最佳提高性能方式,因为jQuery底层将直接调用本地方法document.getElementbyId( ...

  3. Jquery简单的选项卡实现

    概述 原来对jQuery用的不是很多,主要就是表单验证这些部分,最近想要更深入的学习jQuery和JavaScript编码,就找来了一些视频进行学习,然后就做了这个简单的选项卡示例.视频学习地址见最后 ...

  4. 使用jQuery.extend创建一个简单的选项卡插件

    选项卡样式如图,请忽略丑陋的样式,样式可以随意更改 主要是基于jquery的extend扩展出的一个简单的选项卡插件,注意:这里封装的类使用的是es6中的class,所以不兼容ie8等低版本浏览器呦! ...

  5. jquery轮播图详解，40行代码即可简单解决。

    我在两个月以前没有接触过html,css,jquery,javascript.今天我却在这里分享一篇技术贴,可能在技术大牛面前我的文章漏洞百出,也请斧正. 可以看出来,无论是div+css布局还是jq ...

  6. 经验分享：10个简单实用的 jQuery 代码片段

    尽管各种 JavaScirpt 框架和库层出不穷,jQuery 仍然是 Web 前端开发中最常用的工具库.今天,向大家分享我觉得在网站开发中10个简单实用的 jQuery 代码片段. 您可能感兴趣的相 ...

  7. 10个简单实用的 jQuery 代码片段

    尽管各种 JavaScirpt 框架和库层出不穷,jQuery 仍然是 Web 前端开发中最常用的工具库. 今天,向大家分享我觉得在网站开发中10个简单实用的 jQuery 代码片段. 1.平滑滚动到 ...

  8. JQuery插件让图片旋转任意角度且代码极其简单 - 摘自网友

    JQuery插件让图片旋转任意角度且代码极其简单 2012-04-01 09:57:03     我来说两句      收藏    我要投稿 引入下方的jquery.rotate.js文件,然后通过$ ...

  9. 基于jquery仿360网站图片选项卡切换代码

    今天给大家分享一款基于jquery仿360网站图片选项卡切换代码.这款实例适用浏览器:IE8.360.FireFox.Chrome.Safari.Opera.傲游.搜狗.世界之窗.效果图如下: 在线预 ...

随机推荐

  1. iview表单验证trigger:'change,blur'

    今天发现,如果设置select的trigger:'blur'就算选择之后还是边框是红色的,之后查了一下iview的文档,也没有找到准确的蚊子描述,只看到form那个组件其中有一个例子,大概是selec ...

  2. CCF-CSP题解 201503-4 网络延时

    求树的直径. 两遍\(dfs\)就好了. #include <cstdio> #include <cstring> #include <algorithm> #in ...

  3. LeetCode刷题总结-哈希表篇

    本文总结在LeetCode上有关哈希表的算法题,推荐刷题总数为12题.具体考察的知识点如下图: 1.数学问题 题号:149. 直线上最多的点数,难度困难 题号:554. 砖墙,难度中等(最大最小边界问 ...

  4. 从《彩色圆环》一题探讨一类环上dp的解法

    清橙A1202 bzoj2201 bsoj4074 试题来源 2010中国国家集训队命题答辩 问题描述 小A喜欢收集宝物.一天他得到了一个圆环,圆环上有N颗彩色宝石,闪闪发光.小A很爱惜这个圆环,天天 ...

  5. C#线程学习笔记十：async & await入门三

    一.Task.Yield Task.Yield简单来说就是创建时就已经完成的Task,或者说执行时间为0的Task,或者说是空任务,也就是在创建时就将Task的IsCompeted值设置为0. 我们知 ...

  6. WPF布局容器

    1.StackPanel:堆栈面板,通过Orientation属性设置子元素的布局排列方向为“Vertical”(垂直)和“Horizontal”(水平),不写其默认值为“Vertical”,当设置为 ...

  7. Linux下修改MySQL数据库数据文件路径

    使用rpm安装方式安装完MySQL数据库后,数据文件的默认路径为/var/lib/mysql,然而根目录并不适合用于存储数据文件. 原路径:/var/lib/mysql 目标路径:/home/mysq ...

  8. sql server的简单分页

    --显示前条数据 select top(4) * from students; --pageSize:每页显示的条数 --pageNow:当前页 )) sno from students); --带条 ...

  9. JavaScript实例：运动的小球

    本篇博文通过制作一个小球运动动画的实例,来学习在HTML5的画布上实现动画制作的方法,同时理解面向对象程序设计的基本思想. 1．绘制小球 先在HTML页面中设置一个画布. <canvas id= ...

  10. 移动端H5页面开发，碰到一个字体变大的BUG

    移动端H5页面开发,碰到一个字体变大的BUG webkit内核下,对不定高宽的元素可能会放大其字体.那么,就可以设置一个max-width:或者使用-webkit-text-size-adjust: ...