// 自己加载正确路径的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. iOS 手机摇一摇功能

    调用手机摇一摇功能其实很简单,在你调用的控制器的 viewDidLoad方法里调用 [UIApplication sharedApplication].applicationSupportsShake ...

  2. 走进javascript——不起眼的基础，值和分号

    值 有时我很想知道javascript解析引擎是如何区分一个变量的值,比如下面这段代码. var x = 'javascript'; //javascript x = "hello" ...

  3. awk,sed文本处理案例

    #!/bin/bash ############################################################################# #针对一个多级目录下 ...

  4. STM32按键控制程序

    由于最近时间比较匆忙 已经有很久的时间没有写博客了 这次和大家分享的是STM32的一个按键的小程序 他的优点呢也是和上面一个LED一样就是便于移植 更改管脚方便 虽然都是些小程序 但是我觉得他们就像基 ...

  5. 【PHP系列】PHP推荐标准之PSR-1，PSR-2

    说起码代码,刚上大学那会,老师就教导我们,要严格,规范的,把代码写好.代码如人,工工整整.提起规范化的代码,从一开始用命令行编辑C语言代码就开始控制,强制自己按照相关的标准来,所以,现在写代码,不规范 ...

  6. 【Unity优化】Unity优化技巧进阶开篇

    版权声明:本文为博主原创文章,欢迎转载.请保留博主链接:http://blog.csdn.net/andrewfan 做游戏好多年了,关于游戏优化一直是令开发者头疼的一个问题.因为优化牵扯的内容很多, ...

  7. flex布局应用于踩坑

    一.预告 本文不是一篇入门的文章所有请符合以下条件的战斗人员绕道: 1.初学前端,对前端的传统布局还不是很熟悉的人 2.后端人员对前端不打算深入学习的同学 二.开篇 flex布局原本是好几个月前就一直 ...

  8. Python入门教程（3）

    人生苦短,我学Pyhton Python(英语发音:/ˈpaɪθən/), 是一种面向对象.解释型计算机程序设计语言,由Guido van Rossum于1989年底发明,第一个公开发行版发行于199 ...

  9. hadoop2.7.2完全分布式环境搭建

      1.先使用groupadd hadoop 建立hadoop用户组 2.新建用户,useradd -d /usr/hadoop -g hadoop -m hadoop (新建用户hadoop指定用户 ...

  10. Git基础教程（二）

    继续上篇Git基础教程(一),在开篇之前,先回顾一下上篇中的基本命令. 配置命令:git config --global * 版本库初始化:git init 向版本库添加文件:git add * 提交 ...