<!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. warning C4305:“初始化”:从“double”到“float”截断

    编译VS项目时出现警告: warning C4305:“初始化”:从“double”到“float”截断(warning C4305: 'initializing' : truncation from ...

  2. Java动态代理的实现机制

    一.概述 代理是一种设计模式,其目的是为其他对象提供一个代理以控制对某个对象的访问,代理类负责为委托类预处理消息,过滤消息并转发消息以及进行消息被委托类执行后的后续处理.为了保持行为的一致性,代理类和 ...

  3. linux系统环境搭建

    一.安装jdk 参考帖子 用yum安装JDK(CentOS) 1.查看yum库中都有哪些jdk版本 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 [r ...

  4. vue笔记 - 组件间通信 之 中央事件总线bus

    中央事件总线 - 就是一个名字可以叫做bus的vue空实例,里边没有任何内容: var bus = new Vue(); 人如其名,她就像一个公交车一样,来回输送人,将a站点的A输送到b站点,再将b站 ...

  5. dos 下如何查看环境变量

    使用命令:echo %path%

  6. PCB常见的拓扑结构 （转）

    常见的拓扑结构有: 1.点对点拓扑 point-to-point scheduling     该拓扑结构简单,整个网络的阻抗特性容易控制,时序关系也容易控制,常见于高速双向传输信号线:常在源端加串行 ...

  7. VMware激活码，Acrobat激活码

    VMware Workstation Pro key/注册码: VY1DU-2VXDH-08DVQ-PXZQZ-P2KV8 VF58R-28D9P-0882Z-5GX7G-NPUTF YG7XR-4G ...

  8. OpenCV Cut Image via ROI 根据兴趣区域剪裁图片

    我们在使用OpenCV时,有时候需要对现有图片剪裁,比如只需要一个小窗口中的内容,那么我们可以通过OpenCV的兴趣区域 Region of Interest (ROI) 来很轻易的实现,操作也很简单 ...

  9. 赋诗一首<<往事>>

    长笛叙落意,情深知几许: 孤灯伴清影,深山夕照雨. 梦有几轮回,飞舞蝴蝶雨.

  10. ubuntu16.04下安装pycharm

    下面开始教程 先在PyCharm官网下载安装包 链接:https://www.jetbrains.com/pycharm/download/#section=linux 选择平台为Linux,可以看到 ...