table切换
// 自己加载正确路径的jQ
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>无标题文档</title>
<style>
body,div,ul,ol,li,p{margin:0px;padding:0px;}
ul{border:1px solid green;list-style-type:none;}
ul li{float:left;width:100px;height:45px;line-height:45px;background:#abcdef;text-align:center;}
ul li a{text-decoration:none;}
.container{border:1px solid #abcdef;width:300px;height:200px;}
.act{background:#ff6600;}
</style>
</head>
<body>
<ul>
<li>随笔</li>
<li>素材</li>
<li>编程</li>
</ul>
<div class="container">
<div>这是第一个</div>
<div style="display:none;">这是第二个</div>
<div style="display:none;">这是第三个</div>
</div>
<script src="js/jquery-1.11.3.js"></script>
<script>
$(function(){
$("ul li").each(function(){
var index=$(this).index();
$("ul li").eq(0).addClass("act");
$(this).click(function(){
$(this).addClass("act").siblings().removeClass("act");
$(".container>div").eq(index).stop(true).show().siblings().stop(true).hide();
})
})
})
</script>
</body>
</html>
table切换的更多相关文章
- swiper （Table切换和动态加载时候出现的问题）
本文为让心灵-去旅行原创,转载请说明.. 我们在写一个简单的swiper图片轮播的时候很简单,是写死的也就那么几张图片轮播.如果这时候图片和一些东西是后台的,你从js里动态添加到DOM时,这时候你就会 ...
- delphi Table切换控件顺序问题
delphi Table切换控件顺序问题 Tagorder的值就是确定Table键切换顺序的 以上做法只能解决同一类型的多个控件(如Edit1,edit2....)显示顺序问题 假如有不同类型的控件如 ...
- vue的table切换
HTML: <div id="box"> <ul> <li v-for="(item,index) in items" v-tex ...
- 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 ...
- table切换jquery插件 jQuery插件写法模板 流程
通过$.extend()来扩展jQuery 通过$.fn 向jQuery添加新的方法 通过$.widget()应用jQuery UI的部件工厂方式创建 通过$.extend()来扩展jQuery $. ...
随机推荐
- Android开发9：网络访问&Web服务开发
前言 啦啦啦各位小伙伴们好~ 一起进入我们今天的主题.今天我们将和大家学习网络访问和Web服务开发的相关知识,一起学习熟练使用 HttpURLConnection 访问 WebService,熟悉使用 ...
- 【Java基础】String StringBuffer StringBuilder
String String是不可变的 我们都知道String不是基本数据类型,而是一个对象,并且是final类型的,不可变的.(public final class String) 查看以下代码: S ...
- abp zero sample
测试运行地址:http://ghy.demo.aspnetzero.com 账号:admin 密码:123456 需要源码,请加QQ:858-048-581 一.用户管理 二.日志记录 1.先编译成 ...
- 前端总结·基础篇·CSS（三）补充
前端总结系列 前端总结·基础篇·CSS(一)布局 前端总结·基础篇·CSS(二)视觉 前端总结·基础篇·CSS(三)补充 目录 一.移动端 1.1 视口(viewport) 1.2 媒体查询(medi ...
- JS邮箱验证-正则验证
<form act="">输入:<input type="text" name="qc" id="qc" ...
- 用stm32f0x建立新的工程重要步骤
stm32f10x系列新建空的工程主要原理: 1.添加启动文件 不同的芯片类型的启动文件的容量是不同的,选择适合该芯片的容量作为启动文件. 注意:启动文件是汇编语言编写的,所以文件的后缀名为.s 2. ...
- ACM 比大小
比大小 时间限制:3000 ms | 内存限制:65535 KB 难度:2 描述 给你两个很大的数,你能不能判断出他们两个数的大小呢? 比如123456789123456789要大于-1234 ...
- C++ IO学习
关于IO,主要有这么三种类型:标准输入输出,文件输入输出,字符串流.后面两种都是继承自第一种标准输入输出的.他们分别对应的头文件是: 标准输入输出:#include <iostream> ...
- css 超出隐藏显示...
<!DOCTYPE html><html> <head> <meta charset="UTF-8"> <title>& ...
- js中页面刷新和页面跳转的方法总结 [ 转自欢醉同学 ]
.js中cookie的基本用法简介 2009-12-15 js中页面刷新和页面跳转的方法总结 文章分类:Web前端 关键字: javascript js中页面刷新和页面跳转的方法总结 1.histor ...