选项卡是一种很常用的组件。比如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实现选项卡的更多相关文章

  1. juery 实现选项卡

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...

  2. js和jquery实现简单的选项卡

    选项卡切换在做网页的时候经常会用到,以往都是用JQ来实现,代码简单易懂,今天用原生的js实现了一下,二者还是有很大不同的,可以对比一下代码来研究一下. <!DOCTYPE html> &l ...

  3. jQuery的DOM操作实例（1）——选项卡&&Tab切换

    一.原生JavaScript编写tab切换 二.jQuery编写tab切换 在用jQuery编写选项卡过程中,重要的事搞清楚 .eq() 和 .index() 的使用方法. .eq()是jQuery遍 ...

  4. CSS类似微软中国首页的竖向选项卡

    效果体验:http://hovertree.com/texiao/css/24/ 源码下载:http://hovertree.com/h/bjaf/hardklps.htm 代码如下: <!DO ...

  5. Bootstrap之选项卡

    <div class="container"> <!-- nav-tabs作为选项卡头部样式 --> <ul class="nav nav- ...

  6. juery实现贪吃蛇的游戏

    今天用juery做了一个贪吃蛇的游戏,代码比较简陋,不过作为这些天学习juery的成果,非常有成就感.另外关于代码内容如有雷同不胜荣幸. 更改了下 让头和身子的颜色不一样 这样好区分些,虽然还是不怎么 ...

  7. juery学习总结(二)——juery操作页面元素

    所有的操作都可以分为增.删.改.查四种,juery选择器代表查看的功能,那么剩下的操作就是对页面元素增.删.改.页面元素有3部分构成:标签,属性和内容,juery对元素的操作可以从这3方面入手. 一. ...

  8. juery学习总结(一)——juery选择器

    juery在工作中经常使用,遇到不会的问题往往百度一下,事后就忘.使用到现在也感觉不到有什么提高,为了每天进步一点点,从今天起抽时间记录下对juery的学习. 学习之前,首先要了解什么是网页元素,网页 ...

  9. WinForm中重绘TabControl选项卡标题

    最近开发WinForm频繁使用了TabControl控件,这个控件的选项卡没有BackgroundImage这个属性,那么如何为其各个选项卡添加背景图片呢?(这里说的是每个TabPage的头部,也就是 ...

随机推荐

  1. 1.2、使用pip安装Python包

    大多数 Python 包都使用 pip 实用工具安装,使用 virtualenv 创建虚拟环境时会自动安装 pip.激活虚拟环境后,pip 所在的路径会被添加进 PATH. 注:如果你在 Python ...

  2. lamp平台搭建论坛网站（Discuz论坛）

    1. 安装Apache 1) 安装apr [root@www lamp]# yum install zlib-devel gcc gcc-c++ openssl-devel pcre-devel -y ...

  3. wcf--知识点

    WCF创建自托管服务 //自托管 WCF服务 //1.创建宿主 ServiceHost host = new ServiceHost(typeof(TaoBaoWCFServiceContract.T ...

  4. I - Tunnel Warfare

    I - Tunnel Warfare HDU - 1540 思路:原来以为自己已经完全理解了线段树,现在发现其实还差一些火候,做题的时候太拘泥于格式,思路不是很能放开. #include<cst ...

  5. POJ 1625

    什么鬼,真的是有负数的吗?我在字符加上了128才过了.dp[i][j],经过i步到达j状态的路径数.转移很容易了,建个trie图就可以,由前一步可连通到和更新即可. 另外,要用到大数和AC自动机DP ...

  6. POJ 2029

    二维树状数组可解此题 #include <iostream> #include <cstdio> #include <cstring> #include <a ...

  7. 项目产品化——Excel数据库模板化导入（java）

    Excel导入可能是代码开发中比較常见的功能,一个项目假设有多个地方须要excel导入数据库.那么开发的工作量也将比較大,项目产品化过程中,将这么一个类似的功能进行封装合并也是必要的.封装好的代码仅仅 ...

  8. 火云开发课堂 - 《使用Cocos2d-x 开发3D游戏》系列 第一节:3D时代来临！

    <使用Cocos2d-x 开发3D游戏>系列在线课程 第一节:3D时代来临.Cocos2d-x程序猿的机遇和挑战! 视频地址:http://edu.csdn.net/course/deta ...

  9. luogu1541 乌龟棋 动态规划

    题目大意 一行格子,每个格子里有数字.一些卡片,卡片上有1.2.3.4这几种数字.一开始你在格子1,随后每次选一个卡片,你可以前进卡片上的数字个格子,得到格子上的分数,然后讲该卡片丢弃.求取卡片的顺序 ...

  10. 国内物联网平台初探（一） ——百度物接入IoT Hub

    物接入IoT Hub - 架构 全托管的云服务,帮助建立设备与云端之间安全可靠的双向连接 支撑海量设备的数据收集.监控.故障预测等各种物联网场景 物接入IoT Hub - 功能 通信协议:支持MQTT ...