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

效果：

思路：通过切换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. 从项目中理解SSM框架

    我们看招聘信息的时候,经常会看到这一点,需要具备SSH框架的技能:而且在大部分教学课堂中,也会把SSH作为最核心的教学内容. 但是,我们在实际应用中发现,SpringMVC可以完全替代Struts,配 ...

  2. eps-07s，编译及其烧写

    项目导入 清理并编译 会出现两个bin文件,然后烧写 修改红框中的东西,然后返回操作界面,进行一键烧写 硬件接线图 设备调试

  3. android studio 软件常见问题

    xml文件没有智能提示 在网上看到说是去掉省电模式就可以了 然后我试了一下并不能解决, 最终我是这么解决的

  4. Caffe源码-Net类（下）

    net.cpp部分源码 // 接着上一篇博客的介绍,此部分为Net类中前向反向计算函数,以及一些与HDF5文件或proto文件相互转换的函数. template <typename Dtype& ...

  5. Winform项目常用配置方法

    在我们做项目的时候经常遇到需要动态配置系统的情况,比如说10台电脑装了同一个软件,需要识别唯一码,这时候我们会用到配置方法. 具体方法如下: 1) Config文件 里面增加你需要的变量,具体用法如下 ...

  6. C# DataTable to List<T> based on reflection.

    From https://www.cnblogs.com/zjbky/p/9242140.html static class ExtendClass { public static List<T ...

  7. 在 C# 中使用变量

    目录 变量的声明 数据类型 变量的赋值 变量的使用 总结 程序离不开数据.把数字.字母和文字输入计算机,就是希望它利用这些数据完成某些任务.例如,需要计算双十一怎么买才最省钱或者显示购物车里面的商品列 ...

  8. 升鲜宝V2.0_生鲜配送管理系统_杭州生鲜配送行业，升鲜宝使用教程 客户管理 第二章

    1.新增客户 (1)新增客户有两种方式,单个添加和批量添加,客户的结构可以是独立的,也可以是父子结构(比如杭州升鲜宝科技有限公司下有西湖区部门,滨江区部门,余杭区部门等多个分部,就可以建立父子结构,这 ...

  9. centos_mysql 安装脚本

    #!/bin/bash env echo "Download msyql5.7 rpm..." sudo yum install wget wget -i -c http://de ...

  10. C# Thread 线程

    Thread  创建和控制线程,设置其优先级并获取其状态 Thread构造函数接收一个无参数或带一个object类型参数的委托 { Console.WriteLine("), DateTim ...