Juery实现选项卡
选项卡是一种很常用的组件。比如3个选项的选项卡，比较笨的一种办法是，把3个状态写成3个独立页面，互相链接。这样做的问题也显而易见，切换的时候url会变。如果是手机端网页，加载慢一点，给人的感觉是不断的跳网址，加载网页。
选项卡就解决了这个问题，选项卡是在1个页面一次加载，再在这个页面里操作，隐藏显示元素。原生的js实现起来比较麻烦，如果利用jquery，就很简单了。下面是最简单的选项卡。
代码非常简单：
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>无标题文档</title>
<style>
.current{background:#900;}
ul{list-style-type:none;height:30px;padding:0;}
ul li{
width:80px;
height:30px;
line-height:30px;
float:left;
text-align:center;
} #content>div{border:1px solid #00F;width:300px;height:300px;display:none;}
</style>
</head> <body>
<div>
<ul>
<li class="current">选项1</li>
<li>选项2</li>
<li>选项3</li>
</ul>
</div> <div id="content">
<div style="display:block;">aaaaaaaaaa</div>
<div>bbbbbbbbbb</div>
<div>cccccccccc</div>
</div>
<script src="http://apps.bdimg.com/libs/jquery/2.1.1/jquery.min.js"></script>
<script>
$('ul>li').click(function(){
$(this).addClass('current').siblings().removeClass('current');
$('#content>div').eq($(this).index()).show().siblings().hide();
})
</script>
</body>
</html>
Juery实现选项卡的更多相关文章
- juery 实现选项卡
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...
- js和jquery实现简单的选项卡
选项卡切换在做网页的时候经常会用到,以往都是用JQ来实现,代码简单易懂,今天用原生的js实现了一下,二者还是有很大不同的,可以对比一下代码来研究一下. <!DOCTYPE html> &l ...
- jQuery的DOM操作实例（1）——选项卡&&Tab切换
一.原生JavaScript编写tab切换 二.jQuery编写tab切换 在用jQuery编写选项卡过程中,重要的事搞清楚 .eq() 和 .index() 的使用方法. .eq()是jQuery遍 ...
- CSS类似微软中国首页的竖向选项卡
效果体验:http://hovertree.com/texiao/css/24/ 源码下载:http://hovertree.com/h/bjaf/hardklps.htm 代码如下: <!DO ...
- Bootstrap之选项卡
<div class="container"> <!-- nav-tabs作为选项卡头部样式 --> <ul class="nav nav- ...
- juery实现贪吃蛇的游戏
今天用juery做了一个贪吃蛇的游戏,代码比较简陋,不过作为这些天学习juery的成果,非常有成就感.另外关于代码内容如有雷同不胜荣幸. 更改了下 让头和身子的颜色不一样 这样好区分些,虽然还是不怎么 ...
- juery学习总结(二)——juery操作页面元素
所有的操作都可以分为增.删.改.查四种,juery选择器代表查看的功能,那么剩下的操作就是对页面元素增.删.改.页面元素有3部分构成:标签,属性和内容,juery对元素的操作可以从这3方面入手. 一. ...
- juery学习总结(一)——juery选择器
juery在工作中经常使用,遇到不会的问题往往百度一下,事后就忘.使用到现在也感觉不到有什么提高,为了每天进步一点点,从今天起抽时间记录下对juery的学习. 学习之前,首先要了解什么是网页元素,网页 ...
- WinForm中重绘TabControl选项卡标题
最近开发WinForm频繁使用了TabControl控件,这个控件的选项卡没有BackgroundImage这个属性,那么如何为其各个选项卡添加背景图片呢?(这里说的是每个TabPage的头部,也就是 ...
随机推荐
- 如何快速从数据库获取表属性编写JavaBean
以前自己对子设计好的数据库将数据库中的表转换为JavaBean,自己还一个一个慢慢打效率真是低,还是老师比较聪明学习学习. 我用的数据库可视化工具是Navicat Premium.UltraEdit( ...
- Problem 20
Problem 20 问题网址:https://projecteuler.net/problem=20 n! means n × (n − 1) × ... × 3 × 2 × 1阶乘For exam ...
- Java设计模式之 — 策略(Strategy)
转载请注明出处:http://blog.csdn.net/guolin_blog/article/details/8986285 今天你的leader兴致冲冲地找到你,希望你可以帮他一个小忙,他现在急 ...
- 10.IDEAD 的xml中配置DTD
此时发现最后一行已经变成绿色就说明可以了,有提示了
- vue 封装axios以及使用中间代理 proxy
为什么需要封装呢?主要是为了更好管理项目以及增加复用性 1.首先在src文件夹下创建api文件夹 . utils文件夹 . server文件夹 api:创建一个index.js文件 用来存放接口地 ...
- 【Zoj 4061】Magic Multiplication
[链接] 我是链接,点我呀:) [题意] [题解] /* for a[1] from 1~9 1*1=1 2*1=2 3*1=3 1*2=2 2*2=4 3*2=6 1*3=3 2*3=6 3*3=9 ...
- I - Tunnel Warfare
I - Tunnel Warfare HDU - 1540 思路:原来以为自己已经完全理解了线段树,现在发现其实还差一些火候,做题的时候太拘泥于格式,思路不是很能放开. #include<cst ...
- Spring MVC-表单（Form）标签-密码框（Password）示例（转载实践）
以下内容翻译自:https://www.tutorialspoint.com/springmvc/springmvc_password.htm 说明:示例基于Spring MVC 4.1.6. 以下示 ...
- 为什么pthread_cond_wait须要传递mutex參数
这是来自知乎的一个问题,由@吴志强提出,有意思的是,他看了大家的回答后,突然顿悟了,同一时候也发现有人答错了,于是乎.他自己回答了自己的问题. 我看完后.发现他分析的非常精彩,于是就记录在这.以下是他 ...
- C++开发人脸性别识别教程（12）——加入性别识别功能
经过之前几篇博客的解说,我们已经成功搭建了MFC应用框架,并实现了主要的图像显示和人脸检測程序,在这篇博文中我们要向当中加入性别识别代码. 关于性别识别,之前已经专门拿出两篇博客的篇幅来进行解说.这里 ...