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 ...
随机推荐
- 关于GDI+的一些使用基础设置
一.新建一个MFC的单文档工程,例如工程名字叫GDIPLUSTEST1. 二.在工程的stdafx.h头文件中添加入 #include "gdiplus.h" using name ...
- PHP文件包含漏洞攻防实战
本文对PHP文件包含漏洞的形成.利用技巧及防范进行了详细分析,并通过一个真实案例演示了如何利用PHP文件包含漏洞对目标网站进行渗透测试,最终成功获取到网站的WebShell. PHP是一种非常流行的W ...
- X64下的虚拟地址到物理地址的转换
https://bbs.pediy.com/thread-203391.htm 早就知道传上来排版会全乱掉,把pdf直接传上来吧 x64结构体系寻址.pdf 发现安大的关于x86启用PAE下的虚拟 ...
- 使用JDBC插入数据到ORACLE,使用标识列自增列
不同于SQL Server的是,Oracle中插入数据的时候,没有自增列或者是标识列,但是,我们又不想显式的进行主键的插入,这里,必须在Oracle数据库中指定一个标识列,或者说是一个序列.具体方法如 ...
- <转>pandas学习
1.Pandas 基本介绍 Numpy 和 Pandas 有什么不同? 如果用 python 的列表和字典来作比较, 那么可以说 Numpy 是列表形式的,没有数值标签,而 Pandas 就是字典形式 ...
- Delphi XE开发 Android 开机自动启动
https://blog.csdn.net/tanqth/article/details/74357209 Android 下的广播 在Android下,要让我们开发的APP能在开机时自动启动,必须使 ...
- Qt编写activex控件在网页中运行
qt能够实现的东西非常多,还可以写activex控件直接在网页中运行.参照qtdemo下的例子即可. 方案一:可执行文件下载:https://pan.baidu.com/s/14ge9ix2Ny0x7 ...
- 2527: [Poi2011]Meteors[整体二分]
2527: [Poi2011]Meteors Time Limit: 60 Sec Memory Limit: 128 MB Submit: 1528 Solved: 556 [Submit][S ...
- Struts2之命名空间与Action的三种创建方式
看到上面的标题,相信大家已经知道我们接下来要探讨的知识了,一共两点:1.package命名空间设置:2.三种Action的创建方式.下面我们开始本篇的内容: 首先我们聊一聊命名空间的知识,namesp ...
- TFS Build做Web应用持续集成发布的一个技巧
由于面向接口编程的关系,许多实现往往是动态注入运行,在一个项目中直接引用实现dll编译是不合理的.通常我们会在Post Build Event中添加一些xcopy命令将运行时才需要的dll复制到输出目 ...