常见面试题:

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="js/jquery/jquery-1.11.1.min.js"></script>
<style>
*{
margin:0px;
padding:0px;
list-style: none;
}
.main{
width:500px;
height:500px;
margin:auto;
margin-top:100px; }
.tab{
overflow:hidden
}
.tab li{
float:left;
width:100px;
height:30px;
border:1px solid #76b4ff;
border-bottom:none;
margin-right:5px;
}
.tab li:hover{
background-color:#7EC4CC;
color:white;
}
.check{
background-color:#7EC4CC;
color:white;
}
.content{
border:1px solid #76b4ff;
height:200px;
width:500px;
}
.content li{ }
.hidden{
display:none;
}
</style>
</head>
<body>
<div class="main">
<div class="tab">
<ul>
<li>new</li>
<li>text</li>
<li>pic</li>
</ul>
</div>
<div class="content">
<ul>
<li>我是第一页</li>
<li>我是第二页</li>
<li>我是第三页</li>
</ul>
</div>
</div>
</body>
<script>
$(".tab li").click(function(){
$(".tab li").removeClass("check");
$(".content li").addClass("hidden");
$(this).toggleClass("check");
var num=$(this).index();
switch(num){
case 0:
$(".content li:eq("+num+")").removeClass("hidden");
break;
case 1:
$(".content li:eq("+num+")").removeClass("hidden");
break;
case 2:
$(".content li:eq("+num+")").removeClass("hidden");
break;
}
});
</script>
</html>

简单实现tab标签页切换的更多相关文章

  1. 在Bootstrap开发中解决Tab标签页切换图表显示问题

    在做响应式页面的时候,往往需要考虑更多尺寸设备的界面兼容性,一般不能写死像素,以便能够使得界面元素能够根据设备的不同进行动态调整,但往往有时候还是碰到一些问题,如Tab标签第一页面正常显示,但是切换其 ...

  2. JavaScript实现Tab标签页切换的最简便方式

    转载请注明出处:http://www.cnblogs.com/-867259206/p/5664896.html 先说一下最土的一种方法: Html: <div class="tab- ...

  3. VIM 实现tab标签页及分屏,切换命令

    1,在一个窗口中,VIM 的小tab标签页命令:   :tabnew [++opt选项] [+cmd] 文件            建立对指定文件新的tab :tabc       关闭当前的tab ...

  4. Android之ActionBar、Tabs、Fragment、ViewPager实现标签页切换并缓存页面

    感觉 Android 到处都是坑,每个地方都要把人折腾半天. 今天来简单说说 Android之ActionBar.Tabs.Fragment.ViewPager 实现标签页切换并缓存页面 关于他们的介 ...

  5. JavaScript 实现 标签页 切换效果

    JavaScript 实现 标签页 切换效果 版权声明:未经授权,严禁分享! 构建主体界面 HTML 代码 <h1>实现标签页的切换效果</h1> <ul id=&quo ...

  6. JS实现标签页切换效果

    本文实例为大家分享了JS标签页切换的具体代码,供大家参考,具体内容如下   1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 ...

  7. ExtJS配置TabPanel可以拖拽Tab标签页

    1.环境说明 ExtJS版本:7.4.0.42 Sencha Cmd: v7.5.1.20 开发工具:WebStorm 2022.1.1 PS:如果是老版本的ExtJS,引入Ext.ux.TabReo ...

  8. jquery插件之tab标签页或滑动门

    该插件乃本博客作者所写,目的在于提升作者的js能力,也给一些js菜鸟在使用插件时提供一些便利,老鸟就悠然地飞过吧. 此插件旨在实现目前较为流行的tab标签页或滑动门特效,在此插件中默认使用的是鼠标滑过 ...

  9. 如何一行jquery代码写出tab标签页(链式操作)

    啦啦!今天又学了一招,js写几十行的tab标签页jquery写一行就行啦,用到了链式操作!以下是代码: <!DOCTYPE html> <html lang="en&quo ...

随机推荐

  1. 关于JNI程序中引用另外一个lib

    我最近在写一个j2se的程序,我用的是开源的org.amse.ys.zip包里的代码,这部分代码是在FBReaderJ里抽取的,但是其中包含了一些native的方法,需要用的zlib库,而FBRead ...

  2. JavaScript高级程序设计8.pdf

    基本包装类型 为了便于操作基本类型值,ECMAScript定义了3个特殊的引用类型Boolean,Number和String.这些类型与本章介绍的其他用类型相似,同时也具备与各自的基本类型相应的特殊行 ...

  3. Spoj 7001 Visible Lattice Points 莫比乌斯,分块

    题目:http://acm.hust.edu.cn/vjudge/problem/viewProblem.action?id=37193   Visible Lattice Points Time L ...

  4. Java GC专家系列2:Java 垃圾回收的监控

    这是”成为GC专家系列”文章的第二篇.在第一篇理解Java垃圾回收中我们学习了几种不同的GC算法的处理过程,GC的工作方式,新生代与老年代的区别.到目前为止,你应该已经了解了JDK 7中的5种GC类型 ...

  5. C/C++基础(二)

    (1)运算符优先级 #include <cstdio> using namespace std; int main() {    unsigned char a = 0xA5;    un ...

  6. Huffman树及其应用

    哈夫曼树又称为最优二叉树,哈夫曼树的一个最主要的应用就是哈夫曼编码,本文通过简单的问题举例阐释哈夫曼编码的由来,并用哈夫曼树的方法构造哈夫曼编码,最终解决问题来更好的认识哈夫曼树的应用--哈夫曼编码. ...

  7. java如何遍历hashMap

    通过Map的entrySet方法.将返回一个set集合.然后遍历这个set集合: package com.howlaa.day04; import java.util.HashMap; import ...

  8. BufferedInputStream,FileInputStream,FileChannel实现文件拷贝

    从上篇文章中知道BufferedInputStream是自带缓冲区的输入流,可以大大减少IO次数,提供效率.下面的例子中实现了用BufferedInputStream与FileInputStream实 ...

  9. 不要在精确计算中使用float和double类型

    http://blog.csdn.net/androiddevelop/article/details/8478879 一  问题描述 float和double类型不能用于精确计算,其主要目的是为了科 ...

  10. Javascript --扩展String实现替换字符串中index处字符

    String.prototype.replaceCharAt = function(n,c){ return this.substr(0, n)+ c + this.substr(n+1,this.l ...