<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">

<head>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>

<title>tab切换</title>

<meta name="keywords" content="" />

<meta name="Description" content="" />

<link rel="stylesheet" type="text/css" href="http://blog.163.com/fan_yishan/css/style.css"/>

<style type="text/css">

ul,li,div {padding:0;margin:0;}

ul li {float:left;width:100px;height:30px;line-height:30px;text-align:center;background-color:#fff;border:1px #bbb solid;border-bottom:none;}

ul li.fli {background-color:#ccc;color:red;}

ul {overflow:hidden;zoom:1;list-style-type:none;}

#tab_con {width:304px;height:200px;}

#tab_con div {width:304px;height:200px;display:none;border:1px #bbb solid;border-top:none;}

#tab_con div.fdiv {display:block;background-color:#ccc;}

</style>

</head>

<body>

<ul id="tab">

<li class="fli">tab1</li>

<li>tab2</li>

<li>tab3</li>

</ul>

<div id="tab_con">

<div class="fdiv">aaaa</div>

<div>bbbb</div>

<div>cccc</div>

</div>

JS代码：

<script type="text/javascript">

var tabs=document.getElementById("tab").getElementsByTagName("li");

var divs=document.getElementById("tab_con").getElementsByTagName("div");

for(var i=0;i<tabs.length;i++){

tabs[i].onclick=function(){change(this);}

}

function change(obj){

for(var i=0;i<tabs.length;i++)

{

if(tabs[i]==obj){

tabs[i].className="fli";

divs[i].className="fdiv";

}

else{

tabs[i].className="";

divs[i].className="";

}

}

}

</script>

JS实现Tab切换的更多相关文章

  1. Vue.js实现tab切换效果

    利用Vue实现简易tab切换效果 1.1 在我们平时浏览网站的时候,经常看到的特效有图片轮播.导航子菜单的隐藏.tab标签的切换等等.这段时间学习了vue后,开始要写出一些简单的特效. 1.2 实现思 ...

  2. Js 实现tab切换效果

    今天商城系统的后台要添加一个Tab切换的效果,一开始没有思路想要自己去实践这个效果 从网上找jquery 已经有了很好看的案例,实现之后我来学习下思路是如何完成的

  3. 原生js实现tab切换

    //通过原生js实现table切换<html><head><meta http-equiv="Content-Type" content=" ...

  4. 原生JS实现tab切换--web前端开发

    tab切换非常常见,应用非常广泛,比较实用,一般来说是一个网站必不可少的一个效果.例如:https://123.sogou.com/中的一个tab部分: 1.案例源代码 <!DOCTYPE ht ...

  5. js Tab切换实例

    js 实现 tab 切换 实现如下效果: 1.图片每1秒钟切换1次. 2.当鼠标停留在整个页面上时,图片不进行轮播. 3.当点击切换页的选项上时,出现该选项的对应图片,而且切换页选项的背景颜色发生相应 ...

  6. JavaScript实现Tab切换

    在网页开发中,常常会遇见很多Tab切换,Tab切换增加网页浏览的舒适性,对于开发人员特别常见,本文使用JS实现tab切换效果,仅对学习中遇到的知识点做一个总结. 效果图如下:     实现思路: 1. ...

  7. js用户管理中心tab切换界面模板

    效果体验:http://hovertree.com/texiao/js/27/ 效果图如下: 代码如下: <!DOCTYPE html> <html> <head> ...

  8. js或者jq的tab切换

    <!DOCTYPE html><html><head><meta http-equiv="Content-Type" content=&q ...

  9. 使用swiper.js实现移动端tab切换

    在项目中遇到的,要实现tab切换,我用的是swiper.js 官网:http://www.swiper.com.cn/api/start/new.html <!DOCTYPE html> ...

随机推荐

  1. ubuntu 的远程桌面

    好久没有弄ubuntu 丢人的啊,先安装了个服务器版,发现好多命令都忘记了,命令行下根本搞不懂 又安装了个桌面版...但是服务器远程么,putty还是搞的头大,又乱码,有各种文件传输. 还好记得以前用 ...

  2. java中dynamic web project与web project 的区别 [转]

    原帖地址:http://blog.sina.com.cn/s/blog_46726d2401013jlk.html 文章框架: 1.Dynamic  Web Project 概念 2.eclipse ...

  3. C语言学习--可变数组

    #ifndef _ARRAY_ #define _ARRAY_ typedef struct { int *array; int size; } Array; //此处定义结构数据类型 Array,虽 ...

  4. Java中start和run方法的区别

    一.问题引入         说到这两个方法就不得不说多线程,说到多线程就不得不提实现多线程的两种方式继承Thread类和实现Runable接口,下面先看这两种方式的区别. 二. Java中实现多线程 ...

  5. ROHS無鉛問題解答！ROHS IPC SGS

    無鉛smt(smd)問題1. 問Maxim關于無鉛的定義是什么?答無鉛表示在封裝或產品制造中不含鉛(化學符號為Pb).IC封裝中,Pb在外部引腳拋光或電鍍中很常見.對于晶片級封裝(UCSP和倒裝芯片) ...

  6. KEIL C51中的_at_关键字

    绝对位置变量 变量可以在你的C程序中的绝对内存地址位于源模块使用_at_关键字.此功能的用法是: 类型 _ memory_space _ 变量名 _at _  常数 ; 其中:memory_space ...

  7. Hadoop CombineFileInputFormat实现原理及源码分析

    Hadoop适用于少量的大文件场景,而不是大量的小文件场景(这里的小文件通常指文件大小显著小于HDFS Block Size的文件),其主要原因是因为FileInputFormat在为这些小文件生成切 ...

  8. VirtualBox - 自动调整屏幕大小，显示分辨率

    在VirtualBox中安装了Ubuntu后,Ubuntu的屏幕调整不太好,操作起来非常不方便,需要安装Vbox的增强功能.具体如下:1, 在  设备--> 安装增强功能这时会自动加载VBOXA ...

  9. win7配置iis 出现：HTTP 错误 403.14 - Forbidden

    打开 IIS 管理器. 在“功能”视图中,双击“目录浏览”. 在“目录浏览”页上,在“操作”窗格中单击“启用”. 确认站点或应用程序配置文件中的 configuration/system.webSer ...

  10. 快速求幂（Quick Exponentiation）

    接触ACM没几天,向各路大神求教,听说ACM主要是研究算法,所以便开始了苦逼的算法学习之路.话不多说,RT所示,学习快速求幂. 在头文件<math.h>或是<cmath>中,d ...