JavaScript效果之选项卡
拼了命学习js,想把学到的Javascript效果,可以记在博客里,在记录过程中,加深理解。
gogogo,第一个效果,选项卡。
一、选项卡效果的实现思路
选项卡效果的应用很广泛,几乎所有的网站都会用到选项卡,现在就来写选项卡。
选项卡的实现思路:
两个div,一个用来放在选项卡,一个用来放置每个选项卡内容。
首先,先把放置内容的div隐藏起来display:none,只保留一个显示display:block。
然后,通过点击选项卡,在该添加类的位置上添上属性类。
二、实现
我写的这个选项卡界面特“简洁”,只有说明选项卡该如何写。start~~~
截图:
function setTab(name,carsel,n) //name为名字,carsel为游标,n为tab的数量
{
for(var i =1;i<=n;i++)
{
var oMenu = document.getElementById('one'+i);
var oContent = document.getElementById('con_'+name+i);
oMenu.className = i == carsel?"hover":"";
oContent.style.display = i ==carsel?"block":"none";
}
}
<div id="tab_menu">
<ul>
<li id="one1" onclick="setTab('one',1,3)">女装</li>
<li id="one2" onclick="setTab('one',2,3)">男装</li>
<li id="one3" onclick="setTab('one',3,3)">童装</li>
</ul>
</div>
<div id="tab_content">
<div id="con_one1">女装女装女装女装女装</div>
<div id="con_one2" style="display:none">男装男装男装男装男装</div>
<div id="con_one3" style="display:none">童装童装童装童装童装</div>
</div>
上面的Javascript函数,通过一个for循环,来判断用户点击的是哪一个选项卡,然后便获取该选项卡元素。这里的处理是:document.getElementById('one'+i);
获取到的会是id = one1/one2/on3,然后判断,i == carsel?"hover":""; 此时循环的 i 是否会等于游标值,会的话就添加一个hover类上去,改变被点击项的样式。
同样,下面的语句:oContent.style.display = i ==carsel?"block":"none";给当前被点击的选项,设置display为block,即显示出来。
三、完整代码
<!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" />
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<title></title>
<link href="" rel="stylesheet">
<style type="text/css">
.tab
{
width: 600px;
height: 400px;
background: #CCC;
margin: 0 auto;
}
#tab_menu
{
width: 200px;
height: 400px;
float: left;
background: #efefef;
}
#tab_content
{
width: 400px;
height: 400px;
float: left;
}
#con_one1
{
background: yellow;
width: 400px;
height: 400px;
} #con_one2
{
background: green;
width: 400px;
height: 400px;
}
#con_one3
{
background: blue;
width: 400px;
height: 400px;
}
.hover
{
background: yellow;
}
</style>
<script type="text/javascript">
function setTab(name,carsel,n) //carsel为游标,n为tab的数量
{
for(var i =1;i<=n;i++)
{
var oMenu = document.getElementById('one'+i);
var oContent = document.getElementById('con_'+name+i);
oMenu.className = i == carsel?"hover":"";
oContent.style.display = i ==carsel?"block":"none";
}
}
</script>
</head>
<body>
<div class="tab">
<div id="tab_menu">
<ul>
<li id="one1" onclick="setTab('one',1,3)">女装</li>
<li id="one2" onclick="setTab('one',2,3)">男装</li>
<li id="one3" onclick="setTab('one',3,3)">童装</li>
</ul>
</div>
<div id="tab_content">
<div id="con_one1">女装女装女装女装女装</div>
<div id="con_one2" style="display:none">男装男装男装男装男装</div>
<div id="con_one3" style="display:none">童装童装童装童装童装</div>
</div>
</div>
</body>
</html>
四、
补充:
用一个参数来实现
/*------------------一个参数实现--------------------*/
function setTab(n)
{
var aLi = document.getElementsByTagName('li');
var oContent = document.getElementById('tab_content');
var aDiv = oContent.getElementsByTagName('div');
var i =0;
for(i = 0;i<aLi.length; i++)
{
if(n == i)
{
aLi[i].className = "hover";
aDiv[i].style.display = "block";
}
else
{
aLi[i].className = "";
aDiv[i].style.display = "none";
}
}
} <div id="tab_menu">
<ul>
<!--<li id="one1" onclick="setTab('one',1,3)">女装</li>
<li id="one2" onclick="setTab('one',2,3)">男装</li>
<li id="one3" onclick="setTab('one',3,3)">童装</li>-->
<li id="one1" onclick="setTab(0)" class="hover">女装</li>
<li id="one2" onclick="setTab(1)">男装</li>
<li id="one3" onclick="setTab(2)">童装</li>
</ul>
</div>
JavaScript效果之选项卡的更多相关文章
- 二、JavaScript语言--JS基础--JavaScript进阶篇--选项卡切换效果
利用JavaScript知识,实现选项卡切换的效果. 效果图: 文字素材: 房产: 275万购昌平邻铁三居 总价20万买一居 200万内购五环三居 140万安家东三环 北京首现零首付楼 ...
- 7、JavaScript总结——实现选项卡切换的效果
编程挑战 现在利用之前我们学过的JavaScript知识,实现选项卡切换的效果. 效果图: 文字素材: 房产: 275万购昌平邻铁三居 总价20万买一居 200万内购五环三居 140万安家东三环 ...
- javascript与jQuery选项卡效果
HTML结构: <!doctype html><html><head><meta charset="utf-8"><title ...
- Javascript学习笔记2.2 Javascript与DOM选项卡(滑动门)案例详解
学习了DOM的知识,今天开始做些练习,想到了一个网页滑动门的特效,见下图: 1.通过建立索引实现 <!doctype html> <html> <head> < ...
- javascript效果:手风琴、轮播图、图片滑动
最近都没有更,就来几个效果充实一下. 都没有进行美化这步. 手风琴: 纯css: <!DOCTYPE html> <html lang="en"> < ...
- 常用js效果:选项卡切换
js选项卡,很多网站都会用到,我这里用jquery给整了一个简单但是却很实用的js选项卡,废话不多说,直接上代码: <style> .txtadsblk01{ width:200px;} ...
- 闲扯 Javascript 01 实现选项卡
javascript 实现选项卡 今天下午的两节课,在机房闲来没事 ,就学习了javascript 怎么获取HTML的标签,改变CSS样式,资料来源 智能社! <script> windo ...
- javascript简单的选项卡
实现一个简单的选项卡功能 <!DOCTYPE html> <html lang="en"> <head> <meta charset=&q ...
- 用JavaScript实现的选项卡
Codes wins arguments! <!DOCTYPE html> <html> <head> <meta charset="utf-8&q ...
随机推荐
- 如何写一个像btgoogle一样的12306泄露数据查询
demo地址:http://www.btgoogle.com/12306/ 圣诞节,12306送给了我们一个大礼物.大约 14w的数据泄露, 看网上都沸沸扬扬的.开始也准备找一个数据库来看看,随后,我 ...
- linux下进度条的简单实现
在实现进度条之前,先学习一下makefile. 一个工程中的源文件不计其数,其按类型.功能.模块分别放在若干个目录中, makefile 定义了一系列的规则来指定,哪些文件需要先编译,哪些文件需要后编 ...
- android中LayoutInflater详解与使用
android的LayoutInflater用来得到一个布局文件,也就是xxx.xml,而我们常用的findviewbyid是用来取得布局文件里的控件或都布局.inflater即为填充的意思,也就是说 ...
- Xcode:只修改 Bundle Identifier,不修改项目名
找到 xx-Info.plist,打开 直接去修改 Bundle identifier 即可(默认后缀是项目名字).
- python之---类和实例
类和实例: 面向对象最重要的概念就是类(Class)和实例(Instance),必须牢记类是抽象的模板,比如Student类,而实例是根据类创建出来的一个个具体的“对象”,每个对象都拥有相同的方法,但 ...
- QLGame 2d Engine源码地址
QLGame 2d Engine源码地址已经提交到github上,地址为:https://github.com/wsgzxl/QLGame2dEngine
- PYTHON常见数据类型示例
shoplist = ['apple', 'mango', 'carrot', 'banana'] print('I have ', len(shoplist), ' items to purchas ...
- 【网络流24题】 No.15 汽车加油行驶问题 (分层图最短路i)
[题意] 问题描述:给定一个 N*N 的方形网格,设其左上角为起点◎, 坐标为( 1, 1), X 轴向右为正, Y轴向下为正, 每个方格边长为 1, 如图所示. 一辆汽车从起点◎出发驶向右下角终点▲ ...
- Android应用架构
Android开发生态圈的节奏非常之快.每周都会有新的工具诞生,类库的更新,博客的发表以及技术探讨.如果你外出度假一个月,当你回来的时候可能已经发布了新版本的Support Library或者Play ...
- Maven 的安装配置
Maven 的安装配置 一.在安装 Maven 之前,先确保JDK1.7及以上版本并且配置好环境变量. 二.下载maven的bin,在apache官方网站可以下载. 1.首先去官网下载 Maven:h ...