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 $. ...
随机推荐
- 剑指offer编程题Java实现——二维数组中的查找
题目描述 在一个二维数组中,每一行都按照从左到右递增的顺序排序,每一列都按照从上到下递增的顺序排序.请完成一个函数,输入这样的一个二维数组和一个整数,判断数组中是否含有该整数. 下面是我实现的代码 ...
- 自行搭建私有云ownCloud，启用SSL，其他配置
ownCloud简介 ownCloud(官网)是一款开源的私有云框架,可以通过它实现个人网盘的功能,如果拥有一个性能不错的VPS,那么就可以摆脱奇慢无比的百度云等网盘啦!我花了大约一天的时间总算搭好了 ...
- 一个web应用的诞生(7)--结构调整
现在所有的Py代码均写在default.py文件中,很明显这种方法下,一旦程序变的负责,那么无论对于开发和维护来说,都会带来很多问题. Flask框架并不强制要求项目使用特定的组织结构,所以这里使用的 ...
- 0CSS样式表与HTML结合的方法
从此王子和公主幸福的生活在了一起:) 层叠样式表(英文全称:Cascading Style Sheets)是一种用来表现HTML(标准通用标记语言的一个应用)或XML(标准通用标记语言的一个子集)等文 ...
- 关于select count
关于select count,之前有一些不清楚的地方,看到阿里巴巴的Java编程规范,sql规约的第一条就是关于select count的 需要明确以下两点: 1.select count(常量)和s ...
- smarty模板基础1
smarty模板的作用可以让前端和后端分离(也就是前端的显示页面和后端的php代码). smarty模板的核心是一个类,下载好的模板中有这么几个重要的文件夹 (1)libs核心文件夹(2)int.in ...
- php 实现购物车功能,以大苹果购物网为例，上图上代码。。。。
首先是几个简单的登录页面 <body> <form action="chuli.php" method="post"> <div ...
- ASP渲染下拉框使时间依次减少
<% x=year(now()) y=year(now())-1 Do While y>2002%><li><a href="#201 ...
- node.js异步控制流程 回调，事件，promise和async/await
写这个问题是因为最近看到一些初学者用回调用的不亦乐乎,最后代码左调来又调去很不直观. 首先上结论:推荐使用async/await或者co/yield,其次是promise,再次是事件,回调不要使用. ...
- python 接口自动化测试--框架整改（五）
代码结构: 目标架构: 1.用例分析器,自动根据接口的参数,类型生成测试用例 2.数据分析器,自动维护接口参数数据,动态数据自动生成,返回结果自动查询判断 3.核心调用引擎,分SOAP和HTTP两种, ...