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

效果：

思路：通过切换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. C# 中的 bool、char 和 string 类型

    上一篇(地址:https://www.vinanysoft.com/c-sharp-basics/data-types/fundamental-numeric-types/)只介绍了基本数值类型,本篇 ...

  2. MongoDB(五)：更新文档、删除文档

    1. 更新文档 MongoDB的uptade()和save()方法用于将集合中的文档更新.update()方法更新现有文档中的值,而save()方法是传递文档数据替换现有文档.从3.2版本开始,Mon ...

  3. 完整开发流程管理提升与系统需求分析过程 随堂笔记(day 1) 【2019/10/14】

    Top12原则: 主要资源,重要功能,依据需求重要度进行资源分配, 项目100功能 1 day -> 100Task -> 10 Dev 20% 80% 开发各阶段流程及规范   需求.架 ...

  4. Android JSON解析插件

    JSON是一种轻量级的数据格式,用于数据的交互. Android交互数据主要两种方式:JSON和 XML.XML格式比JSON格式数量略大,所以大多都使用Json数据格式. 在Android开发的过程 ...

  5. 不看好 git ，也看不懂为什么那么多人去使用 git

    上来就亮明观点,符合我的性格.呵呵呵. 为什么不看好 git 呢? 首先,我们来看看 git 产生的背景. git 是 Linus 开发的,最初的目的,是为了管理 Linux 系统的源代码.这是一个分 ...

  6. ASP.NET Core on K8S深入学习（11）K8S网络知多少

    本篇已加入<.NET Core on K8S学习实践系列文章索引>,可以点击查看更多容器化技术相关系列文章. 一.Kubernetes网络模型 我们都知道Kubernetes作为容器编排引 ...

  7. Spring Boot 静态资源能加载css 不能加载js

    Spring Boot 配置拦截器的时候默认 是放行 静态资源 , 也就是说不需要进行配置 registry.addResourceHandler("/**") .addResou ...

  8. sqlalchemy 执行原生sql语句

    from contextlib import contextmanager from sqlalchemy import create_engine, ForeignKey from sqlalche ...

  9. telerik reporting 在.net core api 使用

    工具要求:telerik reporting R3 2019..net core 2.2  .vs2017 最新版 从官网下载下来的的telerik reporting 的.net core  例子是 ...

  10. TensorFlow实现简单线性回归示例代码

    # -*- coding: utf-8 -*- import tensorflow as tf import numpy as np import matplotlib.pyplot as plt d ...