tab切换的两种方法
方法一、主要使用了传递参数的思想，把循环变量不能使用转换了一下
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
.nav{
width: 100%;
height: 50px;
text-align: center;
}
.nav li{
display: inline-block;
padding-left: 20px;
padding-right: 20px;
list-style: none;
background: red;
color: #fff;
text-align: center;
height: 50px;
width: 100px;
line-height: 50px;
border-radius: 10px;
}
.container{
width: 100%;
height: 400px;
background: #cccccc;
border-radius: 20px;
text-align: center;
line-height: 400px;
}
.container div{
position: absolute;
/*background: #fff;*/
width: 80%;
left: 10%;
top: 15%;
height: 300px;
margin: 0 auto;
border-radius: 20px;
/*display: none;*/
}
.show{
z-index: 99;
background: #cc6600;
color: #fff;
}
.hide{
/*display: none;*/
z-index: 0;
}
</style>
</head>
<body>
<div class="nav">
<ul>
<li>导航一</li>
<li>导航二</li>
<li>导航三</li>
<li>导航四</li>
<li>导航五</li>
</ul>
</div>
<div class="container" id='container'>
<div class='show'>内容一</div>
<div>内容二</div>
<div>内容三</div>
<div>内容四</div>
<div>内容五</div>
</div>
</body>
<script>
window.onload=function(){
// 1、获取触发事件的元素
var oli = document.getElementsByTagName('li');
for (var i = 0; i < oli.length; i++) {
// 2、给触发元素添加触发事件
oli[i].onmouseover=function(){
// 3、调用函数，执行事件
change(this);
}
}
function change(obj){
var oli = document.getElementsByTagName('li');
var container = document.getElementById('container');
var oDiv = container.getElementsByTagName('div');
for (var i= 0; i< oli.length; i++) {
if(oli[i]==obj){
oDiv[i].className='show';
}else{
oDiv[i].className ='hide';
}
}
}
}
方案二、排他思想和对象思想
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
.container{
width: 100%;
margin: 0 auto;
}
.body{
background: #cc6600;
width: 100%;
height: 500px;
}
.body div{
position: absolute;
background: #fff;
width: 50%;
height: 50%;
left: 25%;
top: 25%;
display: none;
}
.body div.show{
display: block;
}
</style>
</head>
<body>
<div class="container">
<button>导航一</button>
<button>导航二</button>
<button>导航三</button>
<button>导航四</button>
<button>导航五</button>
<button>导航六</button>
</div>
<div class="body" id='body'>
<div class='show'>内容一</div>
<div>内容二</div>
<div>内容三</div>
<div>内容四</div>
<div>内容五</div>
<div>内容六</div>
</div>
</body>
<script>
window.onload=function(){
// 1、获取元素
var btns = document.getElementsByTagName('button');
var body = document.getElementById('body');
var oDiv = body.getElementsByTagName('div');
// 2、遍历元素
for(var i = 0;i<btns.length;i++){
// 6、自定义属性，使触发元素与目标元素相关联
btns[i].index=i;
// 3、添加事件
btns[i].onclick=function(){
// 4、遍历清除样式
for (var i= 0; i< btns.length; i++) {
btns[i].className='';
oDiv[i].className='';
}
// 5、给目标元素设置样式
oDiv[this.index].className='show';
}
}
}
</script>
</html>
tab切换的两种方法的更多相关文章
- 原生JS—实现图片循环切换的两种方法
今天我们主要讲讲如何使用原生JS实现图片的循环切换的方法.多余的话我们就不多说了,我们一个一个开始讲吧. 1 原生JS实现图片循环切换 -- 方法一 在上栗子之前我们先简单介绍一下所用的一些知识点. ...
- CSS实现导航条Tab切换的三种方法
前面的话 导航条Tab在页面中非常常见,本文说详细介绍CSS实现导航条Tab的三种方法 布局 根据上图所示,先规定几个定义,上图的模块整体叫做导航,由导航标题和导航内容组成.要实现上图所示的布 ...
- 【原】react做tab切换的几种方式
最近搞一个pc端的活动,搞了一个多月,甚烦,因为相比于pc端,更喜欢移动端多一点.因为移动端又能搞我的react了. 今天主要总结一下react当中tab切换的几种方式,因为tab切换基本上都会用到. ...
- Linux安装MySQL的两种方法
转载:http://blog.csdn.net/superchanon/article/details/8546254/ 1. 运行平台:CentOS 6.3 x86_64,基本等同于RH ...
- hive权威安装出现的不解错误！（完美解决）两种方法都可以
以下两种方法都可以,推荐用方法一! 方法一: 步骤一: yum -y install mysql-server 步骤二:service mysqld start 步骤三:mysql -u root - ...
- Response.Redirect 打开新窗体的两种方法
普通情况下,Response.Redirect 方法是在server端进行转向,因此,除非使用 Response.Write("<script>window.location=' ...
- android fragment传递参数_fragment之间传值的两种方法
在Activity中加载Fragment的时候.有时候要使用多个Fragment切换.并传值到另外一个Fragment.也就是说两个Fragment之间进行参数的传递.查了很多资料.找到两种方法.一种 ...
- Response.Redirect 打开这两种方法的一种新形式
在一般情况下.Response.Redirect 该方法是在server年底转向,因此,除非 Response.Write("<script>window.location='h ...
- 两种方法上传本地文件到github
https://www.jianshu.com/p/c70ca3a02087 自从使用github以来,一直都是在github网站在线上传文件到仓库中,但是有时因为网络或者电脑的原因上传失败.最重要的 ...
随机推荐
- chm手册显示已取消到该网页的导航
解决:在chm右键查看有没有解除锁定选项.1.右键单击chm文件,选择属性:2.在最下面点击“解除锁定”并确定后,再次打开chm,就正常了
- Awesome Machine Learning
https://github.com/josephmisiti/awesome-machine-learning 包含了很多的machine-learning开源的资源,包括各种语言的machin l ...
- oracle 安装注意
1. 本地安装oracle数据库后,并不代表可以用plsql 连接上了.. 如果安装的是64位的oracle,plsql 是不能直接连接的.. 2. 如果是64位的..需要下载一个oracle 客户端 ...
- js 获取、清空 input type="file"的值 .（转）
上传控件基础知识说明: 上传控件(<input type="file"/>)用于在客户端浏览并上传文件,用户选取的路径可以由value属性获取,但value属性是只读的 ...
- 在Linux中让打印带颜色的字
echo显示带颜色,需要使用参数-e 格式如下: echo -e "\033[字背景颜色;文字颜色m字符串\033[0m" 例如: echo -e "\033[41;37 ...
- Javascript数组方法（译）
在JavaScript中,数组可以使用Array构造函数来创建,或使用[]快速创建,这也是首选的方法.数组是继承自Object的原型,并且他对typeof没有特殊的返回值,他只返回'object'. ...
- 百度上传工具webuploader,图片上传附加参数
项目中需要上传视频,图片等资源.最先做的是上传图片,开始在网上找了一款野鸡插件,可以实现图片上传预览(无需传到后台).但是最近这个插件出了莫名的问题,不易修复,一怒之下,还是决定找个大点的,靠谱的插件 ...
- 第五天：内置对象（7.Javascript内置对象）
1)中所术是内置对象,2)中为自定义对象 代码说明如下 2.1.1 定义并创建对象实例方式1,代码如下: <!DOCTYPE html><html lang="en&quo ...
- JAVA的JNI调用
由于JNI调用C和调用C++差不多,而且C++中可以混合写C代码,所以这里主要是写关于JNI调用C++的部分. 一般步骤: 先是写普通的Java类,其中包括本地方法调用. 然后编译这个Java类,调 ...
- 腾讯DBA官方博客开通了，欢迎交流
腾讯DBA官方博客开通了,欢迎交流哈..麻烦给放到首页一下 http://tencentdba.com 腾讯互娱游戏DBA团队一直致力于为游戏提供稳定.高效的DB运营服务,这是我们团队的使 ...