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

效果：

思路：通过切换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. 线程中put（None）和主函数中put（None）的区别和用法

    ''' 初试生产者消费者模型代码 分析: 对象含有生产者.队列.消费者 Queue队列模块,不适合传大文件,通常传一些消息. ''' '''多生产者进程和多消费者进程''' #导入模块 from mu ...

  2. THLM，CSS

    目录 HTTP协议的四大特性 数据格式 状态码 HTML概念 标签 标签分类 按是否封闭分类 按级别分类 标签属性 head内常用标签 body内常用标签 body内重要标签 a 标签 img 标签 ...

  3. 如何将hive表中的数据导出

    近期经常将现场的数据带回公司测试,所以写下该文章,梳理一下思路. 1.首先要查询相应的hive表,比如我要将c_cons这张表导出,我先查出hive中是否有这张表. 查出数据,证明该表在hive中存在 ...

  4. 在命令提示符下，运行Java程序时，提示"找不到或无法加载主类"

    小白:在命令提示符下,运行Java程序时,提示"找不到或无法加载主类". 大神:运行Java程序的作用是让Java解释器装载,检验并运行字节码文件(.class).因此,在运行Ja ...

  5. WFS服务查询方法

    基于Geoserver发布的wfs服务,实现空间和属性信息的查询.wfs包含getFeature操作,用来检索要素信息,支持返回gml格式的地理要素表达. WFS的getFeature操作需要提供的参 ...

  6. leetcode菜鸡斗智斗勇系列（4）--- 单一数字的乘积和总合的减法

    1.原题: https://leetcode.com/problems/subtract-the-product-and-sum-of-digits-of-an-integer/ Given an i ...

  7. Java设计模式13：责任链模式

    前言 来菜鸟这个大家庭10个月了,总得来说比较融入了环境,同时在忙碌的工作中也深感技术积累不够,在优秀的人身边工作必须更加花时间去提升自己的技术能力.技术视野,所以开一个系列文章,标题就轻松一点叫做最 ...

  8. Leetcode327: Count of Range Sum 范围和个数问题

    ###问题描述 给定一个整数数组,返回range sum 落在给定区间[lower, upper] (包含lower和upper)的个数.range sum S(i, j) 表示数组中第i 个元素到j ...

  9. 0基础-scp命令一学就会

    scp -P 22 -r  /home/server Android@192.168.1.110:/opt    将本地/home/server的文件夹上传到远端服务器192.168.1.110的目录 ...

  10. redis集群搭建及常用操作

    前言: Redis 是一个高性能的key-value数据库. redis的出现,很大程度补偿了memcached这类key/value存储的不足,在部 分场合可以对关系数据库起到很好的补充作用.它提供 ...