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

效果:

思路:通过切换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. WebService创建、发布及在IIS上部署

    一.项目创建 1.     首先打开VS,这里我以VS2013为例 2.     点击“新建项目”,依次选择“Web”——>“Visual Studio 2012”——>“ASP.NET空 ...

  2. 2016/09/21 context.getConfiguration().get()

    查看api:http://hadoop.apache.org/docs/stable/api/ public String get(String name) Get the value of the ...

  3. appium+java(八)获取Toast内容信息

    前言 Appium中很经典的问题了,在两年前也就是2017年3月6号07:22分,我才看到appium1.6.3版本的发布,更新内容为Ios上可以实现Toast的获取,而Windows也就是安卓端,还 ...

  4. WinForm自定义控件之DefaultValue的误解

    DefaultValue,顾名思义,默认值的意思.但这个默认值不是用来显示的,它的作用是当属性设置的值(无法代码写还是属性窗口输入)与DefaultValue相同时,会区别显示,比如其它值加粗,Def ...

  5. CDN原理加速解析

    CDN概念 CDN全称叫做“Content Delivery Network”,中文叫内容分发网络.   原理分析 我们知道,当我们使用域名访问某一个网站时,实际上就是将请求包(以Http请求为例)通 ...

  6. Visual Studio中相对路径中的宏定义

    $(RemoteMachine) 设置为“调试”属性页上“远程计算机”属性的值.有关更多信息,请参见更改用于 C/C++ 调试配置的项目设置. $(References) 以分号分隔的引用列表被添加到 ...

  7. Leetcode题解 - 链表简单部分题目代码+思路(21、83、203、206、24、19、876)

  8. Make a List View Editable 使列表视图可编辑

    In this lesson, you will learn how to make a List View editable. For this purpose, the DemoTask List ...

  9. CAD制图软件哪个好?试试这两个就知道了

    CAD中,每天都是需要绘制很多的CAD图纸.一般都是借助CAD制图软件来进行使用的,图纸的格式都是dwg格式的.那CAD制图工具有很多种,对于CAD制图初学入门的小伙伴们来说CAD制图软件哪个好?想要 ...

  10. GO基础之文件操作

    一.文件操作的基本API func main() { //绝对路径 fileInfo , err := os.Stat("E:/a.txt") fileInfo , err = o ...