JS实现选项卡切换效果
1、在网页制作过程中，我们经常会用到选项卡切换效果，它能够让我们的网页在交互和布局上都能得到提升
3、 具体的实现是通过getElementsByTagName方法，先对选项卡三个标头H3进行捕获，产生一个数组，我们利用for循环分别对每个标头选项H3添加一个index属性作为它的序号同时注册单击事件，当某个H3被单击时，我们先把所有的H3都变成原始状态，没active类，然后再把被单击的H3要添加一个active类使其变成白色，此时，我们还要知道被单击H3的序号，这样我们可以去，设定与之序号相同的DIV显示出来，而其它的DIV刚隐藏起来。
<!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=gb2312" />
<title>选项卡</title> <style type="text/css"> #tab{width:300px;border:3px solid #CCC;}
#tab .active{background-color:#FFF}
#tab h3{
margin:0px;
padding:0px;
font-size:14px;
float:left;
background-color:#CCC;
width:60px;
height:24px;
line-height:24px;
text-align:center;
}
#tab div{
clear:both;
height:100px;
font-size:14px;
padding:20px 0px 0px 20px;
display:none;
}
</style>
<script>
window.onload=function(){
var oTab=document.getElementById("tab");
var aH3=oTab.getElementsByTagName("h3");
var aDiv=oTab.getElementsByTagName("div");
for(var i=0;i<aH3.length;i++){
aH3[i].index=i;
aH3[i].onclick=function(){
for(var i=0;i<aH3.length;i++){
aH3[i].className="";
aDiv[i].style.display="none";
}
this.className="active";
aDiv[this.index].style.display="block";
}
}
} </script> </head> <body> <div id="tab">
<h3 class="active">教育</h3>
<h3>娱乐</h3>
<h3>汽车</h3> <div style="display:block">教育的内容</div>
<div>娱乐的内容</div>
<div>汽车的内容</div>
</body>
</html>
JS实现选项卡切换效果的更多相关文章
- 用html+css+js实现选项卡切换效果
文章转载自:http://tongling.github.io/JSCards/ 用html+css+js实现选项卡切换效果 使用之前学过的综合知识,实现一个新闻门户网站上的常见选项卡效果: 文字素材 ...
- 用js实现选项卡切换效果
这是要实现的效果图: 一.HTML页面布局 <!-- HTML页面布局 --><ul class="tab_menu"> <li class=&quo ...
- [前端] html+css+javascript 实现选项卡切换效果
用html+css+js实现选项卡切换效果使用之前学过的综合知识,实现一个新闻门户网站上的常见选项卡效果: 文字素材:房产: 275万购昌平邻铁三居 总价20万买一居 200万内购五环三居 140万安 ...
- 二、JavaScript语言--JS基础--JavaScript进阶篇--选项卡切换效果
利用JavaScript知识,实现选项卡切换的效果. 效果图: 文字素材: 房产: 275万购昌平邻铁三居 总价20万买一居 200万内购五环三居 140万安家东三环 北京首现零首付楼 ...
- 纯js实现网页tab选项卡切换效果
纯js实现网页tab选项卡切换效果 百度搜索 js 点击菜单项就可以切换内容的效果
- 使用jquery实现选项卡切换效果
几张简陋的框架效果图 页面加载时: 选项卡操作后: css样式: <style type="text/css"> *{margin:0px;padding:0px;} ...
- vue实现选项卡切换效果
效果如下: 说明: 这里我使用的原理是利用vue中的v-show/显示隐藏指令,当为true的时候显示,为false的时候隐藏 1html代码: <head> <meta chars ...
- 使用ViewPager+Fragment实现选项卡切换效果
实现效果 本实例主要实现用ViewPage和Fragment实现选项卡切换效果,选项卡个数为3个,点击选项卡或滑动屏幕会切换Fragment并实现选项卡下方下边框条跟随移动效果. 本程序用androi ...
- js实现选项卡切换
<!DOCTYPE html><html><head lang="en"> <meta charset="UTF-8" ...
随机推荐
- 《从零开始学Swift》学习笔记（Day 14）——字符串的插入、删除和替换
原创文章,欢迎转载.转载请注明:关东升的博客 对应可变字符串可以插入.删除和替换,String提供了几个方法可以帮助实现这些操作.这些方法如下: splice(_:atIndex:).在索引位置插入字 ...
- jQuery之获取select选中的值
本来以为jQuery("#select1").val();是取得选中的值, 那么jQuery("#select1").text();就是取得的文本. 这是不正确 ...
- ActiveMQ5.10.2版本配置JMX
ActiveMQ的特性之一是很好的支持JMX.通过JMX MBeans可以很方便的监听和控制ActiveMQ的broker. 鉴于官方网站提供的JMX特性说明对于远程访问的配置流程不是很完整,笔者在实 ...
- 每个分片都是一个独立的Apache Lucene索引
数据架构:索引+文档+文档类型+映射 [索引 文档 文档类型 映射] 索引index 对逻辑数据的逻辑存储:关系型数据库表.MongoDB集合.CouchDb数据库索引 index <---sh ...
- 费马小定理 Fermat Theory
w 整数的质数次方和自身的差是是质数的倍数 费马小定理(Fermat Theory)是数论中的一个重要定理,其内容为: 假如p是质数,且Gcd(a,p)=1,那么 a(p-1)≡1(mod p).即: ...
- Toeplitz matrix
w https://en.wikipedia.org/wiki/Toeplitz_matrix Proof of Stolz-Cesaro theorem | planetmath.org http ...
- ehcache 常用配置项详解（三）
EhCache 给我们提供了丰富的配置来配置缓存的设置: 这里列出一些常见的配置项: cache元素的属性: name:缓存名称 maxElementsInMemory:内存中最大缓存对象数 maxE ...
- <mvc:view-controller path=""/>标签的作用
<mvc:view-controller path=""/>标签的作用 对应WEB-INF目录下面的JSP页面,我们知道是不能直接使用URL访问到.需要通过转发的方式, ...
- 常用代码块：创建httpclient 2
HttpGet httpGet = new HttpGet(url);SSLContext sslcontext = SSLContexts.custom().loadTrustMaterial(ne ...
- Android零散知识点积累
本文仅在记录android开发中遇到的零散知识点,会不断更新... 目录 .隐藏系统标题栏 .图片尺寸及屏幕密度 3.获取顶部状态栏高度 1.隐藏系统标题栏 1)在资源文件styles.xml中定义样 ...