<!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. 《shiro框架》

    20170929 shiro授权流程学习 shiro-filter执行流程 CacheManager(shiro缓存管理) JEESITE登录流程简单梳理 shiro与springMVC整合 shir ...

  2. JS - url相关

    今天在找获取当前网址除去参数的js方式,结果自己会的竟然只有window.location.href 查到的一篇博文: http://www.cnblogs.com/weiyuxinghuacun/a ...

  3. django restframwork 教程之authentication权限

    当前我们的API在编辑或者删除的时候没有任何限制,我们不希望有些人有高级的行为,确保: 代码段始终与创建者相关联 只允许授权的用户可以创建代码段 只允许代码段创建者可以更新和删除 没有认证的请求应该有 ...

  4. 分布式实时日志系统（二） 环境搭建之 flume 集群搭建/flume ng资料

    最近公司业务数据量越来越大,以前的基于消息队列的日志系统越来越难以满足目前的业务量,表现为消息积压,日志延迟,日志存储日期过短,所以,我们开始着手要重新设计这块,业界已经有了比较成熟的流程,即基于流式 ...

  5. 【Redis使用系列】使用Redis做防止重复提交

    前言 在平时的开发中我们都需要处理重复提交的问题,避免业务出错或者产生脏数据,虽然可以通过前端控制但这并不是可以完全避免,最好的方式还是前后端均进行控制,这样的话就可以更有效,尽可能全面的去减少错误的 ...

  6. AD采样模块采集带模拟量真空表值的实验

    实验采用带模拟量,分辨率为1-5V,量程为0--101kpa的真空表 数据采集模块采用DAM-8021,  16位模块 算法描述如下: 真空表读数范围: 0到-101kpa 模拟量输出: 1-5V 一 ...

  7. eclipse安装maven时候如果conf文件夹中有setting文件则会以这个文件为主，如果自己设置了user的配置文件则会无效

    eclipse安装maven时候如果conf文件夹中有setting文件则会以这个文件为主,如果自己设置了user的配置文件则会无效

  8. 题目1042：Coincidence(最长公共子序列 dp题目)

    题目链接:http://ac.jobdu.com/problem.php?pid=1042 详解链接:https://github.com/zpfbuaa/JobduInCPlusPlus 参考代码: ...

  9. LeetCode 79 Word Search（单词查找）

    题目链接:https://leetcode.com/problems/word-search/#/description 给出一个二维字符表,并给出一个String类型的单词,查找该单词是否出现在该二 ...

  10. [转]centos6 与 7 其中的一些区别

    # vi /etc/ssh/sshd_config #将MaxAuthTries注释去掉 MaxAuthTries 5(登录次数) UseDNS no   默认是yes 的,把这个改为no,可以大大减 ...