三行Jquery代码实现简单的选项卡
今晚，我们来用实现一个简单的选项卡切换代码，主要代码只有两行。
效果：
思路：通过切换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代码实现简单的选项卡的更多相关文章
- jquery代码实现简单的五星评价功能！
实现: 1,鼠标移动到第三个星星,则一二三星星变亮,后两个变暗 2,鼠标点击某个星星后,可以继续选择,但拿开后星星会定格住你点击的位置 <script type="text/javas ...
- jQuery代码性能小细节
选择器Selector的使用 $("#id")使用id来定位DOM元素无疑是最佳提高性能方式,因为jQuery底层将直接调用本地方法document.getElementbyId( ...
- Jquery简单的选项卡实现
概述 原来对jQuery用的不是很多,主要就是表单验证这些部分,最近想要更深入的学习jQuery和JavaScript编码,就找来了一些视频进行学习,然后就做了这个简单的选项卡示例.视频学习地址见最后 ...
- 使用jQuery.extend创建一个简单的选项卡插件
选项卡样式如图,请忽略丑陋的样式,样式可以随意更改 主要是基于jquery的extend扩展出的一个简单的选项卡插件,注意:这里封装的类使用的是es6中的class,所以不兼容ie8等低版本浏览器呦! ...
- jquery轮播图详解，40行代码即可简单解决。
我在两个月以前没有接触过html,css,jquery,javascript.今天我却在这里分享一篇技术贴,可能在技术大牛面前我的文章漏洞百出,也请斧正. 可以看出来,无论是div+css布局还是jq ...
- 经验分享：10个简单实用的 jQuery 代码片段
尽管各种 JavaScirpt 框架和库层出不穷,jQuery 仍然是 Web 前端开发中最常用的工具库.今天,向大家分享我觉得在网站开发中10个简单实用的 jQuery 代码片段. 您可能感兴趣的相 ...
- 10个简单实用的 jQuery 代码片段
尽管各种 JavaScirpt 框架和库层出不穷,jQuery 仍然是 Web 前端开发中最常用的工具库. 今天,向大家分享我觉得在网站开发中10个简单实用的 jQuery 代码片段. 1.平滑滚动到 ...
- JQuery插件让图片旋转任意角度且代码极其简单 - 摘自网友
JQuery插件让图片旋转任意角度且代码极其简单 2012-04-01 09:57:03 我来说两句 收藏 我要投稿 引入下方的jquery.rotate.js文件,然后通过$ ...
- 基于jquery仿360网站图片选项卡切换代码
今天给大家分享一款基于jquery仿360网站图片选项卡切换代码.这款实例适用浏览器:IE8.360.FireFox.Chrome.Safari.Opera.傲游.搜狗.世界之窗.效果图如下: 在线预 ...
随机推荐
- 你不知道的JavaScript（上）this和对象原型（四）原型
五章 原型 1.[[ Prototype ]] JavaScript 中的对象有一个特殊的 [[Prototype]] 内置属性,其实就是对于其他对象的引用.几乎所有的对象在创建时 [[Prototy ...
- LeetCode刷题总结-哈希表篇
本文总结在LeetCode上有关哈希表的算法题,推荐刷题总数为12题.具体考察的知识点如下图: 1.数学问题 题号:149. 直线上最多的点数,难度困难 题号:554. 砖墙,难度中等(最大最小边界问 ...
- uni-app开发小程序入门到崩溃
最近一段时间公司要做一个小程序项目,还要支持,微信小程序,头条小程序,百度小程序.一套代码,实现三个平台.当时接到这个任务,就不知道怎么去下手,一套代码,分别要发布三个平台,赶紧就去上网了解这些东西, ...
- net core 3.1 跨域 Cors 找不到 “Access-Control-Allow-Origin”
首先在ConfigureServices添加 public void ConfigureServices(IServiceCollection services) { services.AddCors ...
- 完整开发流程管理提升与系统需求分析过程 随堂笔记(day 1) 【2019/10/14】
Top12原则: 主要资源,重要功能,依据需求重要度进行资源分配, 项目100功能 1 day -> 100Task -> 10 Dev 20% 80% 开发各阶段流程及规范 需求.架 ...
- 阿里云esc 安装 mysql8.0
打开 连接工具,我用的是 MobaXterm_Personal_12.1 (官网下载地址:https://moba.en.softonic.com/) 连接到 ecs,然后移除 默认的 mariadb ...
- Jsonp的js实现，跨域请求，同源策略机制
Jsonp的js实现,跨域请求,同源策略机制1.跨域请求:请求URL的协议,域名,端口三者之间任意一个与当前页面地址不同即为跨域 存在跨域的情况: 网络协议不同,端口不通,域名不同,子域名不同,域名和 ...
- redlock算法及其问题
背景 redlock算法是为了解决什么问题呢? 在单redis实例实现分布式锁时,可能会出现线程A设置完锁后,master挂掉,slave提升为master,因为异步复制的特性,线程A设置的锁丢失了, ...
- 操作MyBatis引发Error setting null for parameter #X with JdbcType OTHER .无效的列类型
再用MyBatis操作Oracle的时候,传入null值而引发的错误 异常信息: org.springframework.jdbc.UncategorizedSQLException: Error s ...
- C# transfer local file to remote server based on File.Copy
using System; using System.Collections.Generic; using System.ComponentModel; using System.Linq; usin ...