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

效果：

思路：通过切换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. MapStruct 映射工具

    # MapStruct 映射工具  本篇主要讲解MapStruct 一款映射工具,只需简单的定义一个Mapper接口,在编译期间,MapStruct将生成此接口的实现,据说MapStruct性能最高是 ...

  2. Python 单线程下实现多个socket并发

    ## 客户端 import socket import gevent import threading import multiprocessing ip_bind = ('127.0.0.1',80 ...

  3. 用canvas写飞机大战

    1.老规矩,当我们开始做项目的时候,我们第一步就是要进行分析,当我们的游戏开始做的时候我们要把一整个游戏分成五个阶段来写: 五个阶段和我方飞机的生命值,还有游戏的得分情况如下: //游戏欢迎状态 co ...

  4. SpringBoot微服务电商项目开发实战 --- 全局异常处理

    上一篇文章讲了Redis缓存的安全防范及Kafka的接入及消息实现,今天接着前面的内容基础说说项目的优化和基础配置,今天要讲的内容主要是Spring Boot项目中的全局异常处理.为什么要做这件事呢? ...

  5. Linux配置免密登陆

    可能很多新手在配置免密登陆的时候第一次会经常没有配成功,会报错. 在这里将为大家演示最简洁且能一次配置成功的教程 首先以3台机器为例: 192.168.3.102 master 192.168.3.1 ...

  6. mysql如何处理高并发(转)

    mysql高并发的解决方法有:优化SQL语句,优化数据库字段,加缓存,分区表,读写分离以及垂直拆分,解耦模块,水平切分等. 高并发大多的瓶颈在后台,在存储mysql的正常的优化方案如下: (1)代码中 ...

  7. LINUX OS EXERCISE 08

    1 配置crontab计划任务时,记录的格式是什么? 分钟 小时 日期 月份 星期 可执行语句 2 配置crontab计划任务实例. 以root用户身份添加计划任务,每天早上7:30启动sshd服务, ...

  8. 自学Java编程，如何混到一个7k薪资实习生的岗位

    现在Java软件开发的专业一直都是热门,有很多专业的学生,比如电子.机械.会计.土木等等专业由于专业本身没有更高的提升空间,所以现在的年轻人更加喜欢做一些科技前沿的工作,毕竟现在接触的都是电子产品.而 ...

  9. C# 委托汇总

    委托汇总以及遗留问题: using System; using System.Collections.Generic; using System.Linq; using System.Text; us ...

  10. Java生鲜电商平台-服务化后的互联网架构实战(针对生鲜电商小程序或者APP)

    Java生鲜电商平台-服务化后的互联网架构实战(针对生鲜电商小程序或者APP) “微服务架构”的话题非常之火,很多朋友都在小窗我,说怎么做服务化?解答“怎么做”之前,先得了解“为什么做”. 画外音:做 ...