table切换（自己写）
<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<meta name="description" content="描述">
<meta name="keywords" content="关键字">
<title>tab布局</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>
table切换（自己写）的更多相关文章
- swiper （Table切换和动态加载时候出现的问题）
本文为让心灵-去旅行原创,转载请说明.. 我们在写一个简单的swiper图片轮播的时候很简单,是写死的也就那么几张图片轮播.如果这时候图片和一些东西是后台的,你从js里动态添加到DOM时,这时候你就会 ...
- vue的table切换
HTML: <div id="box"> <ul> <li v-for="(item,index) in items" v-tex ...
- 关闭shift中英文切换 英文代码/中文注释随意切换着写。
x 背景 写代码的时候总是意外的就切成中文了,特别是代码中大小写切换的这种情况... 例如:"public static TimeZone CurrentTime..."publi ...
- delphi Table切换控件顺序问题
delphi Table切换控件顺序问题 Tagorder的值就是确定Table键切换顺序的 以上做法只能解决同一类型的多个控件(如Edit1,edit2....)显示顺序问题 假如有不同类型的控件如 ...
- selenium常用api之切换：table切换、alert弹框切换、iframe框架切换
10.查看浏览器打开了多少个table和当前页面在哪个table 测试:打开了浏览器后,打开了一个新的标签页之后,显示此时有2个table,浏览器中当前页面展示的是第2个页面,但是代码打印显示的仍然是 ...
- JavaScript 几种简单的table切换
方法一:for循环+if判断当前点击与自定义数组是否匹配 <!DOCTYPE html> <html lang="en"> <head> < ...
- JS几种table切换
1.使用className <!doctype html> <html lang="en"> <head> <meta charset=& ...
- element table切换分页不勾选的自带方法
场景一:没有回显勾选的情况 table表格加row-key标识选中行唯一标识,多选框加reserve-selection设置为true <template> <el-table v- ...
- 多个table切换 getElementsByClassName
<!doctype html> <html> <head> <meta charset="utf-8"> <meta name ...
随机推荐
- Vim 的 Python 编辑器详细配置过程 (Based on Ubuntu 12.04 LTS)
为什么要用vim编辑py文件? 因为在Linux命令行中,缺少图形界面的IDE,vim是最佳的文本编辑器,而为了更好的编辑py文本,所以配置vim. 1. 安装完整版vim vi和vim的区别? 在L ...
- C++易混淆知识点整理
// 1 /////////////////////////////////////////////////////////////////////// // 常量指针:,指针可修改,变量不可修改(只 ...
- 在mysql存储过程中拼接sql解决in的字段类型不匹配问题
一个朋友问我一个问题,他写了一个存储过程,并在存储过程调用了另外一个自定义的函数.该函数返回类型如'1,34,56'的字符串,并将该字符串作为存储过程的select的id条件. begin DECLA ...
- UITableView+FDTemplateLayoutCell源码学习笔记
本文转载至 http://www.cocoachina.com/bbs/read.php?tid=299773 基本原理是通过缓存每个cell的高度,当tableview回调delegate的hei ...
- JavaScript的数据类型---最全，最详细的数据类型，高级的工程师从数据类型开始
一.基本数据类型 1.字符串数据类型 var hello="你好啊"; var hello='你好啊';示例:<script language="j ...
- 常见微信小程序开发工具
图标: 1.iconfont图标库:http://www.iconfont.cn/home/index?spm=a313x.7781069.1998910419.2
- 转载>>六款大数据采集平台的架构分析
随着大数据越来越被重视,数据采集的挑战变的尤为突出.今天为大家介绍几款数据采集平台: Apache Flume Fluentd Logstash Chukwa Scribe Splunk Forwar ...
- sencha touch datepicker/datepickerfield(时间选择控件)扩展（废弃 仅参考）
参考资料:https://market.sencha.com/extensions/datetimepicker 上面的扩展在2.2有些问题,参考源码重新写了一个 TimePicker: Ext.de ...
- [原]openstack-kilo--issue(四) WARNING: nova has no endpoint in ! Available endpoints for this service:
本博客已经添加"打赏"功能,"打赏"位置位于右边栏红色框中,感谢您赞助的咖啡. 在安装kilo的时候出现了一个报错 nova endpoints WARNING ...
- JVM常用工具使用之jmap
一.参考链接 https://www.cnblogs.com/yjd_hycf_space/p/7753847.html 二.个人的总结 一般我习惯使用 jmap -dump:live,format= ...