jquery实现选项卡（两句即可实现）
<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<meta name="description" content="描述">
<meta name="keywords" content="关键字">
<title>布局</title>
<script src="js/jquery-1.9.1.min.js"></script>
<style>
#ul {
height: 30px;
margin-bottom: 10px;
}
#ul li {
height: 30px;
line-height: 30px;
list-style: none;
padding: 0 15px;
border: 1px solid #dfdfdf;
float: left;
cursor: pointer;
}
#ul .current {
background: #f4f4f4 repeat;
height: 30px;
}
.content {
width: 300px;
height: 200px;
}
.content div {
width: 300px;
height: 200px;
border: 1px solid #dfdfdf;
display: none;
}
.content .show {
display: block;
}
</style>
<script>
$(function() {
$('#ul>li').click(function() {
$(this).addClass('current').siblings().removeClass('current');
//根据li索引值确定显示哪个DIV
$('.content>div').eq($(this).index()).show().siblings().hide();
});
})
</script>
</head>
<body>
<ul id="ul">
<li class="current">title1</li>
<li>title2</li>
<li>title3</li>
</ul>
<div class="content">
<div class="show">content111。。。</div>
<div>content222。。。</div>
<div>content333。。。</div>
</div>
</body>
</html>
jquery实现选项卡（两句即可实现）的更多相关文章
- 对百度WebUploader开源上传控件的二次封装,精简前端代码(两句代码搞定上传)
前言 首先声明一下,我这个是对WebUploader开源上传控件的二次封装,底层还是WebUploader实现的,只是为了更简洁的使用他而已. 下面先介绍一下WebUploader 简介: WebUp ...
- MySQL优化聊两句
原文地址:http://www.cnblogs.com/verrion/p/mysql_optimised.html MySQL优化聊两句 MySQL不多介绍,今天聊两句该如何优化以及从哪些方面入手, ...
- 对百度WebUploader的二次封装,精简前端代码之图片预览上传(两句代码搞定上传)
前言 本篇文章上一篇: 对百度WebUploader开源上传控件的二次封装,精简前端代码(两句代码搞定上传) 此篇是在上面的基础上扩展出来专门上传图片的控件封装. 首先我们看看效果: 正文 使用方式同 ...
- jquery插件的两种形式
这里总结一下jquery插件的两种形式,一种是通过字面量的形式组织代码,另一种是通过构造函数的方式.下面就两种形式来分析俩个例子. 例子1: ;(function ($,window,document ...
- yii的入口文件index.php中为什么会有这两句
yii的应用模板中,index.php中 前面会有这两句 <?php // comment out the following two lines when deployed to produc ...
- jQuery插件开发的两种方法及$.fn.extend的详解
jQuery插件开发分为两种: 1 类级别 类级别你可以理解为拓展jquery类,最明显的例子是$.ajax(...),相当于静态方法. 开发扩展其方法时使用$.extend方法,即jQuery.ex ...
- 简单两句话解释下prototype和__proto__
先上两句代码: var Person = function () {}; var p = new Person(); 把new的过程拆分成以下三步: <1> var p={}; 也就是说, ...
- jquery选择器中两个class是什么意思？
jquery选择器中两个class是什么意思? $(".class1 .class2") 选择class1元素下class2的元素(中间有空格)$(".class1.cl ...
- jquery Tabs选项卡切换
效果: HTML部分: <!DOCTYPE html> <html lang="en"> <head> <meta charset=&qu ...
随机推荐
- （原）一句mpAudioPolicy->get_input引发的血案
今天分析Android的Audio系统时,对mpAudioPolicy->get_input进行了分析,没想到这一句话的背后如此复杂,简直是一句话引出的血案啊! 分析结果如下:(关于排版:各个变 ...
- JavaScript 简介--对javascript的初识，最基础的了解
一.javascript的介绍 JavaScript是网景(Netscape)公司开发的一种基于客户端浏览器.面向(基于)对象.事件驱动式的网页脚本语言.JavaScript语言的前身叫作Livesc ...
- vs必备快捷键整理
.格式化代码:Ctrl+E,D .格式化部分代码:选中代码->Ctrl+K,F.或者Ctrl+E,F. .折叠cs文件所有方法:Ctrl+M,O .打开或折叠所有代码:Ctrl+M,L (打开或 ...
- Git学习之msysGit环境支持
============================== msysGit中Shell环境的中文支持 ============================== 1 中文录入的问题 默认的Shel ...
- delphi 10 Seattle 第一个Android程序
delphi 10 Seattle 第一个Android程序 1.打开Delphi RAD Studio Seattle,如下图 2.选择black application 点击OK 3. ...
- 【linux系列】centos7配置桥接模式静态IP
一.设置桥接模式 VMware->Edit->Virtual Network Edit 二.查看物理机的ip地址 三.根据物理机的ip地址,设置linux虚拟机的ip地址 四.网络重启 五 ...
- css笔记 - transform学习笔记(二)
transform转换 CSS transform 属于2D/3D上的转换.变形效果.他不是一个动画,他就是变形.比如正方形变平行四边形,再变圆形.都是形状变成另一个形状. 但是如果配合上transi ...
- vuex - 常用命令学习及用法整理
https://vuex.vuejs.org/zh-cn/api.html 命令 用途 备注 this.$store 组件中访问store实例 store.state.a 获取在state对象中的数据 ...
- 用ChrootDirectory限制SFTP登录的用户只能访问指定目录且不能进行ssh登录
创建不能ssh登录的用户sftpuser1,密码用于sftp登录: sudo adduser sftpuser1 --home /sftp/sftpuser1 --shell /bin/false s ...
- Centos 7.x系统安装后的初始化配置
1.配置IP.网关,编辑/etc/sysconfig/network-scripts/ifcfg-eno16777736 TYPE=Ethernet BOOTPROTO=none //默认为dhcp ...