<!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. linux系统如何操作隐藏文件

    在linux下,以点"."开头命名的文件在系统中被视为隐藏文件.因此,如果想隐藏某个文件或目录,一种简单的办法就是把文件名命名为点开头. 对于目录backcron,可以这样操作隐藏 ...

  2. vc11(vs2012)下编译php源码

    需要原料: vs2012.php源码 1.本机的mingw没搞定,参考网上文章尝试vs2012编译,借助vs2012自带的命令行工具: 需要去bison官网下载bison.exe放在“c:/windo ...

  3. 使用node新建一个socket服务器连接Telnet客户端并且进行输入的显示

    最近在看node的socket,这个很有趣,这个可以很清晰的得到网络http请求的一个过程.首先我们需要一个Telnet的客户端,node(博主为8.0+版本) Telnet客户端的开启过程 有的系统 ...

  4. setcursor 与 showcursor

    Windows为鼠标光标保存了一个「显示计数」.如果安装了鼠标,显示计数会被初始化为0:否则,显示计数会被初始化为-1. 只有在显示计数非负时才显示鼠标光标.要增加显示计数,呼叫:ShowCursor ...

  5. Javascript学习笔记--理解prototype

    prototype和closure是js中两个不好搞懂的概念,幸好网上有很多相关的文章,在网上查了一遍以后,总是是觉得有点理解了.今天先说说prototype. 之前一直被ajax in action ...

  6. Android应用的自动升级、更新模块的实现（转）

    我们看到很多Android应用都具有自动更新功能,用户一键就可以完成软件的升级更新.得益于Android系统的软件包管理和安装机制,这一功能实现起来相当简单,下面我们就来实践一下.首先给出界面效果: ...

  7. java基础---->git的使用(一)

    这里面记录一下git的使用,只是平时工作中遇到的一些问题的解决方案,不会涉及到git的一些基础概念及说明.人的天性便是这般凉薄,只要拿更好的来换,一定舍得. Git的一些使用 一.在码云建立好仓库之后 ...

  8. 【Web前端开发最佳实践系列】前端代码推荐和建议

    一.常用的前端文件的组织结构: 1.js (放置JavaScript代码) lib(放置框架JavaScript文件) custom.js 2.css(放置CSS样式代码) lib(放置框架CSS文件 ...

  9. 【Spring Boot&&Spring Cloud系列】使用Intellij构建Spring Boot和Mybatis项目

    一.创建项目 1.File->New->Project->spring initializer 2.勾选Web SQL Template Engines 3.项目生成之后,点击add ...

  10. 百度前端学院js课堂作业合集+分析(更新中...)

    第一课:简陋的登录框 <!DOCTYPE html> <html lang="en"> <head> <meta charset=&quo ...