<!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. No Entity Framework provider found for the ADO.NET provider with invariant name 'System.Data.SqlClient'

    运行代码是出现了这个错误,No Entity Framework provider found for the ADO.NET provider with invariant name 'System ...

  2. 转：一些MongoDB限制

    文章来自于:http://www.infoq.com/cn/news/2013/11/mongodb-things 消耗磁盘空间 这是我的第一个困惑:MongoDB会消耗太多的磁盘空间了.当然了,这与 ...

  3. 【Oracle】ORACLE SQL Developer不支持JAVA版本

    ORACLE SQL Developer不支持JAVA版本 今天我打开 ORACLE SQL Developer准备开始练手.没有想到却给出了错误提示. 我 是安装了java JDK的而且是1.6版本 ...

  4. C#程序设计基础——转义字符

    \’ 单引号 \” 双引号 \\ 反斜杠 \0 空字符 \a 感叹号 \b 退格 \f 换页 \n 换行 \r 回车 \t 水平Tab \v 垂直Tab

  5. Spring Assert.notNull

    Exception in thread "main" java.lang.IllegalArgumentException: Source must not be null at ...

  6. 【HDOJ】5063 Operation the Sequence

    #include <cstdio> #include <cstring> #include <cstdlib> #define MAXN 100005 #defin ...

  7. 发布WebService到IIS和调用WebService

    一:在项目上右键单击,选择发布,如图 二:可以单击重命名,自定义网站的名字,发布方式为:文件系统,目标路径为要发布的文件的位置,它需要放到IIS的目录下面的 三:打开IIS管理器,右键单击网站,添加网 ...

  8. Java 设计模式实现 不错的引用

    这段时间有兴趣重新温习一下设计模式在Java中的实现,碰巧看到一个不错的设计模式总结,这里引用一下作为参考. 创建型模式: JAVA设计模式-Singleton JAVA设计模式-Factory JA ...

  9. Spark Streaming 入门指南

    这篇博客帮你开始使用Apache Spark Streaming和HBase.Spark Streaming是核心Spark API的一个扩展,它能够处理连续数据流. Spark Streaming是 ...

  10. C#日历上显示节气、阴阳历节假日信息

    近期在做一个工作日历,想在日历上设置工作日,显示请假.加班等相关信息,显示农历日期信息(包括农历日期.节日 .节气).公历信息(节假期). 不能不说,http://www.cnblogs.com/ho ...