<!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切换（自己写）的更多相关文章

  1. swiper （Table切换和动态加载时候出现的问题）

    本文为让心灵-去旅行原创,转载请说明.. 我们在写一个简单的swiper图片轮播的时候很简单,是写死的也就那么几张图片轮播.如果这时候图片和一些东西是后台的,你从js里动态添加到DOM时,这时候你就会 ...

  2. vue的table切换

    HTML: <div id="box"> <ul> <li v-for="(item,index) in items" v-tex ...

  3. 关闭shift中英文切换 英文代码/中文注释随意切换着写。

    x 背景 写代码的时候总是意外的就切成中文了,特别是代码中大小写切换的这种情况... 例如:"public static TimeZone CurrentTime..."publi ...

  4. delphi Table切换控件顺序问题

    delphi Table切换控件顺序问题 Tagorder的值就是确定Table键切换顺序的 以上做法只能解决同一类型的多个控件(如Edit1,edit2....)显示顺序问题 假如有不同类型的控件如 ...

  5. selenium常用api之切换：table切换、alert弹框切换、iframe框架切换

    10.查看浏览器打开了多少个table和当前页面在哪个table 测试:打开了浏览器后,打开了一个新的标签页之后,显示此时有2个table,浏览器中当前页面展示的是第2个页面,但是代码打印显示的仍然是 ...

  6. JavaScript 几种简单的table切换

    方法一:for循环+if判断当前点击与自定义数组是否匹配 <!DOCTYPE html> <html lang="en"> <head> < ...

  7. JS几种table切换

    1.使用className <!doctype html> <html lang="en"> <head> <meta charset=& ...

  8. element table切换分页不勾选的自带方法

    场景一:没有回显勾选的情况 table表格加row-key标识选中行唯一标识,多选框加reserve-selection设置为true <template> <el-table v- ...

  9. 多个table切换 getElementsByClassName

    <!doctype html> <html> <head> <meta charset="utf-8"> <meta name ...

随机推荐

  1. mybatis 之 parameterType="Map"

    // 获得品牌下的商品 Map<String, Object> params = new HashMap<String, Object>(); params.put(" ...

  2. EXCEL数据匹配：The 'Microsoft.Jet.Oledb.4.0' provider is not registered on the local machin

    百度的处理结果: 作者:LisenYang http://blog.csdn.net/lisenyang/article/details/52106492 这篇博文里面说的,默认设置修改[启动32应用 ...

  3. java基础---->数组的基础使用（二）

    这里对List(jdk 1.7)列表里面的一些方法做一些简单的分析,以避免有些函数的误用.手写瑶笺被雨淋,模糊点画费探寻,纵然灭却书中字,难灭情人一片心. List中注意的方法 一.Arrays.as ...

  4. activeMQ---->ActiveMQ的使用（一）

    这里通过一个入门的案例来体会一下ActiveMQ的作用以及使用方法.你要做一个不动声色的大人了.不准情绪化,不准偷偷想念,不准回头看.去过自己另外的生活.你要听话,不是所有的鱼都会生活在同一片海里. ...

  5. 邮件MIME格式分析

    http://www.cnblogs.com/crystalray/articles/3302427.html 邮件mime格式 参考: rfc4021,Registration of Mail an ...

  6. flex常用兼容写法

    一般放在common.css中: .flex{ display: -webkit-box; display: -webkit-flex; display: -moz-box; display: -ms ...

  7. angularjs笔记《二》

    小颖最近不知怎么了,老是犯困,也许是清明节出去玩,到现在还没缓过来吧,玩回来真的怕坐车了,报了个两日游得团,光坐车了,把人坐的难受得,去了也就是爬山,回来感觉都快瘫了,小颖去的时候还把我家仔仔抱着一起 ...

  8. jenkins不安装任何插件时，是什么样的

    因为jenkins中插件众多,很多时候大家默认安装的话,会默认安装一堆插件.而很多插件会给jenkins的各个方面去增强它, 一致于不清楚哪些功能是插件提供的,还是jenkins自带的. 所以下面将没 ...

  9. MYSQL的索引和常见函数

    MySQL的索引 索引机制 MySQL属于关系型数据库,为了提高查询速度,可以创建索引. 索引:由表中的一个或多个字段生成的键组成,这些键存储在数据结构(B树或者hash表中),于是又分为B树索引(I ...

  10. java 程序运行的基础知识【Java bytecode】

    聊聊文字,写一篇关于 java 基础知识的博文. JVM 线程栈 到 函数运行 每一个JVM线程来说启动的时候都会创建一个私有的线程栈.一个jvm线程栈用来存储栈帧,jvm线程栈和C语言中的栈很类似, ...