// 自己加载正确路径的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切换的更多相关文章

  1. swiper （Table切换和动态加载时候出现的问题）

    本文为让心灵-去旅行原创,转载请说明.. 我们在写一个简单的swiper图片轮播的时候很简单,是写死的也就那么几张图片轮播.如果这时候图片和一些东西是后台的,你从js里动态添加到DOM时,这时候你就会 ...

  2. delphi Table切换控件顺序问题

    delphi Table切换控件顺序问题 Tagorder的值就是确定Table键切换顺序的 以上做法只能解决同一类型的多个控件(如Edit1,edit2....)显示顺序问题 假如有不同类型的控件如 ...

  3. vue的table切换

    HTML: <div id="box"> <ul> <li v-for="(item,index) in items" v-tex ...

  4. selenium常用api之切换：table切换、alert弹框切换、iframe框架切换

    10.查看浏览器打开了多少个table和当前页面在哪个table 测试:打开了浏览器后,打开了一个新的标签页之后,显示此时有2个table,浏览器中当前页面展示的是第2个页面,但是代码打印显示的仍然是 ...

  5. JavaScript 几种简单的table切换

    方法一:for循环+if判断当前点击与自定义数组是否匹配 <!DOCTYPE html> <html lang="en"> <head> < ...

  6. JS几种table切换

    1.使用className <!doctype html> <html lang="en"> <head> <meta charset=& ...

  7. element table切换分页不勾选的自带方法

    场景一:没有回显勾选的情况 table表格加row-key标识选中行唯一标识,多选框加reserve-selection设置为true <template> <el-table v- ...

  8. 多个table切换 getElementsByClassName

    <!doctype html> <html> <head> <meta charset="utf-8"> <meta name ...

  9. table切换jquery插件 jQuery插件写法模板 流程

    通过$.extend()来扩展jQuery 通过$.fn 向jQuery添加新的方法 通过$.widget()应用jQuery UI的部件工厂方式创建 通过$.extend()来扩展jQuery $. ...

随机推荐

  1. LNMP系统服务搭建过程详解

    和LAMP不同的是LNMP中的N指的是Nginx(类似于Apache的一种web服务软件)其他都一样.目前这种环境应用的也是非常之多.Nginx设计的初衷是提供一种快速高效多并发的web服务软件.在静 ...

  2. Visual Studio命令行创建库文件lib

    Visual Studio命令行创建库文件lib OS:win7 旗舰版SP1 64位 编译器: VS 2013 express 的cl 建一个文件Static_Lib.h,源代码如下 #ifndef ...

  3. Spring源码解析三：IOC容器的依赖注入

    一般情况下,依赖注入的过程是发生在用户第一次向容器索要Bean是触发的,而触发依赖注入的地方就是BeanFactory的getBean方法. 这里以DefaultListableBeanFactory ...

  4. MRC、ARC内存管理机制

    MRC下,oc内存管理遵循"谁创建.谁释放.谁引用.谁管理"的机制,当创建或引用一个对象时,需要向她发送alloc,copy,retain消息,当释放该对象时需要发送release ...

  5. 利用CSS3 animation绘制动态卡通人物，无需使用JS代码

    此外博主原创,转载请注明出处:谢谢~ 效果图: 其中云.风车.尾巴是动态的: 以下是代码: <!DOCTYPE html> <html lang="en"> ...

  6. Hibernate双向关联的增删改操作的属性

    双向关联关系下的增删改操作的属性                    1.cascade属性:  eg:<set name = "emps" cascade="s ...

  7. 配置虚拟主机(windows环境下nginx+php)

    需要给一个ip绑定不同域名,例如有两个项目/www/,/www2/ 需要http://a.com时访问的是www 项目 http://b.com访问的是www2项目   那么需要在nginx/conf ...

  8. RabbitMQ(从安装到使用)

    RabbitMQ 一,RabbitMQ简单介绍: RabbitMQ是一个在AMQP基础上完整的,可复用的企业消息系统.他遵循Mozilla Public License开源协议. MQ全称为Messa ...

  9. python实现视频下载

    最近一两年短视频业务风生水起,各个视频网站都有各自特色的短视频内容.如果有这样一个程序,可以把各大视频网站的热门用户最新发布的视频都下载下来,不仅方便自己观看,还可以将没有版权的视频发布在个人社交网站 ...

  10. kali linux 折腾笔记

    http://xiao106347.blog.163.com/blog/static/215992078201342410347137/ 这里告诉你刚刚装好kali后要做,有些也是不正确的,可能开始你 ...