js实现简单的可切换选项卡效果


Posted in Javascript onApril 10, 2015

本文实例讲述了js实现简单的可切换选项卡效果的方法。分享给大家供大家参考。具体如下:

如图,最简单的纯粹的选项卡

js实现简单的可切换选项卡效果

第一步,当然是先写html代码和css样式

<!DOCTYPE html>
<html>
<head>
<meta charset="gb2312" />
<title>无标题文档</title>
<style>
body,ul,li{margin:0; padding:0; font:12px/1.5 arial;}
ul,li{list-style:none;}
.wrap{width:500px; margin:20px auto;}
.hide{display:none;}
#tab_t{height:25px;border-bottom:1px solid #ccc;}
#tab_t li{float:left; width:80px; height:24px;
line-height:24px; margin:0 4px; text-align:center;
border:1px solid #ccc; border-bottom:none;
background:#f5f5f5; cursor:pointer}
#tab_t .act{ position:relative; height:25px;
margin-bottom:-1px; background:#fff;}
#tab_c{border:1px solid #ccc;
border-top:none; padding:20px;}
</style>
</head>
<body>
<div class="wrap">
 <ul id="tab_t">
 <li class="act">选择1</li>
 <li>选择2</li>
 <li>选择3</li>
 <li>选择4</li>
 </ul>
 <div id="tab_c">
 <div>内容1</div>
 <div class="hide">内容2</div>
 <div class="hide">内容3</div>
 <div class="hide">内容4</div>
 </div>
</div> 
</body>
</html>

第二步,实现简单的切换效果

要点1:

abc.document.getElementsByTagName("li")

取得abc下面的所有标签为li的元素,返回的是一个元素集合,有数组的一些属性。

要点2:循环,先循环给li加上onclick事件,再onlink事件点击的时候,再循环让所有选项卡的act样式去掉,所有的内容隐藏。然后让所点击的选项及对应内容显示。
要点3:

tab_t_li[i].index = i;

在循环时,给选项卡加一个额外的属性并赋值,以做选项卡和内容的对应。

<!DOCTYPE html>
<html>
<head>
<meta charset="gb2312" />
<title>无标题文档</title>
<style>
body,ul,li{margin:0; padding:0; font:12px/1.5 arial;}
ul,li{list-style:none;}
.wrap{width:500px; margin:20px auto;}
.hide{display:none;}
#tab_t{
height:25px;
border-bottom:1px solid #ccc;
}
#tab_t li{
float:left;
width:80px;
height:24px;
line-height:24px;
margin:0 4px;
text-align:center;
border:1px solid #ccc;
border-bottom:none;
background:#f5f5f5;
cursor:pointer
}
#tab_t .act{
position:relative;
height:25px;
margin-bottom:-1px;
background:#fff;
}
#tab_c{
border:1px solid #ccc;
border-top:none;
padding:20px;
}
</style>
<script>
window.onload = function(){
 var tab_t = document.getElementById("tab_t");
 var tab_t_li = tab_t.getElementsByTagName("li");
 var tab_c = document.getElementById("tab_c");
 var tab_c_li = tab_c.getElementsByTagName("div");
 var len = tab_t_li.length;
 var i=0;
 for(i=0; i<len; i++){
  tab_t_li[i].index = i;
  tab_t_li[i].onclick = function(){
   for(i=0; i<len; i++){
    tab_t_li[i].className = '';
    tab_c_li[i].className = 'hide';
   }
   tab_t_li[this.index].className = 'act';
   tab_c_li[this.index].className = '';
  }
 }
}
</script>
</head>
<body>
<div class="wrap">
 <ul id="tab_t">
 <li class="act">选择1</li>
 <li>选择2</li>
 <li>选择3</li>
 <li>选择4</li>
 </ul>
 <div id="tab_c">
 <div>内容1</div>
 <div class="hide">内容2</div>
 <div class="hide">内容3</div>
 <div class="hide">内容4</div>
 </div>
</div> 
</body>
</html>

第三步,写成函数。上面的写法只能一个页面用一个选项卡,如果再加一个的话,就需要复制一份,再改很多变量名。

要点:tab_t_li[i][evt] 因为传值的时候是字符串,如果直接写的话就是tab_t_li[i]."onclick"这样话是执行不了的,tab_t_li["onclick"]这样执行没问题。

好了,现在一个页面上就可以有多个切换了,只需要调用函数的时候,写上相应的id名和标签名,事件名称就可以了

<!DOCTYPE html>
<html>
<head>
<meta charset="gb2312" />
<title>无标题文档</title>
<style>
body,ul,li{margin:0; padding:0; font:12px/1.5 arial;}
ul,li{list-style:none;}
.wrap{width:500px; margin:20px auto;}
.hide{display:none;}
#tab_t{
height:25px;
border-bottom:1px solid #ccc;
}
#tab_t li{
float:left;
width:80px;
height:24px;
line-height:24px;
margin:0 4px;
text-align:center;
border:1px solid #ccc;
border-bottom:none;
background:#f5f5f5;
cursor:pointer
}
#tab_t .act{
position:relative;
height:25px;
margin-bottom:-1px;
background:#fff;
}
#tab_c{
border:1px solid #ccc;
border-top:none;
padding:20px;
}
</style>
<script>
window.onload = function(){
 tab("tab_t","li","tab_c","div","onmouseover")
 function tab(tab_t,tab_t_tag,tab_c,tag_c_tag,evt){
  var tab_t = document.getElementById(tab_t);
  var tab_t_li = tab_t.getElementsByTagName(tab_t_tag);
  var tab_c = document.getElementById(tab_c);
  var tab_c_li = tab_c.getElementsByTagName(tag_c_tag);
  var len = tab_t_li.length;
  var i=0;
  for(i=0; i<len; i++){
   tab_t_li[i].index = i;
   tab_t_li[i][evt] = function(){
    for(i=0; i<len; i++){
     tab_t_li[i].className = '';
     tab_c_li[i].className = 'hide';
    }
    tab_t_li[this.index].className = 'act';
    tab_c_li[this.index].className = '';
   }
  }
 }
}
</script>
</head>
<body>
<div class="wrap">
 <ul id="tab_t">
 <li class="act">选择1</li>
 <li>选择2</li>
 <li>选择3</li>
 <li>选择4</li>
 </ul>
 <div id="tab_c">
 <div>内容1</div>
 <div class="hide">内容2</div>
 <div class="hide">内容3</div>
 <div class="hide">内容4</div>
 </div>
</div> 
</body>
</html>

希望本文所述对大家的javascript程序设计有所帮助。

Javascript 相关文章推荐
Dreamweaver jQuery智能提示插件,支持版本提示,支持1.6api
Jul 31 Javascript
分享几个超级震憾的图片特效
Jan 08 Javascript
动态标签 悬停效果 延迟加载示例代码
Nov 21 Javascript
jquery和css3实现的炫酷时尚的菜单导航
Sep 01 Javascript
jQuery简单实现日历的方法
May 04 Javascript
jQuery实现字符串全部替换的方法
Dec 12 Javascript
JS实现图片放大缩小的方法
Feb 15 Javascript
原生JS实现的多个彩色小球跟随鼠标移动动画效果示例
Feb 01 Javascript
JS实现DOM删除节点操作示例
Apr 04 Javascript
js实现图片上传并预览功能
Aug 06 Javascript
v-slot和slot、slot-scope之间相互替换实例
Sep 04 Javascript
Vue实现菜单切换功能
Nov 08 Javascript
js使用DOM操作实现简单留言板的方法
Apr 10 #Javascript
js实现简单鼠标跟随效果的方法
Apr 10 #Javascript
js实现交换运动效果的方法
Apr 10 #Javascript
js实现简单的左右两边固定广告效果实例
Apr 10 #Javascript
javascript实现简单的鼠标拖动效果实例
Apr 10 #Javascript
js简单实现点击左右运动的方法
Apr 10 #Javascript
js实现透明度渐变效果的方法
Apr 10 #Javascript
You might like
PHP判断文章里是否有图片的简单方法
2014/07/26 PHP
PHP Echo字符串的连接格式
2016/03/07 PHP
微信公众号开发之通过接口删除菜单
2017/02/20 PHP
PHP设计模式之适配器模式原理与用法分析
2018/04/25 PHP
jquery使用$(element).is()来判断获取的tagName
2014/08/24 Javascript
基于AngularJS+HTML+Groovy实现登录功能
2016/02/17 Javascript
理解javascript对象继承
2016/04/17 Javascript
BootStrap table使用方法分析
2016/11/08 Javascript
js使用原型对象(prototype)需要注意的地方
2017/08/28 Javascript
js HTML5 canvas绘制图片的方法
2017/09/08 Javascript
webpack3之loader全解析
2017/10/26 Javascript
React/Redux应用使用Async/Await的方法
2017/11/16 Javascript
vue2.0实现前端星星评分功能组件实例代码
2018/02/12 Javascript
vue 2.1.3 实时显示当前时间,每秒更新的方法
2018/09/16 Javascript
Vee-validate 父组件获取子组件表单校验结果的实例代码
2019/05/20 Javascript
layui下拉列表select实现可输入查找的方法
2019/09/28 Javascript
将Python中的数据存储到系统本地的简单方法
2015/04/11 Python
python 生成器协程运算实例
2017/09/04 Python
Python2.X/Python3.X中urllib库区别讲解
2017/12/19 Python
Python常见工厂函数用法示例
2018/03/21 Python
对Pandas DataFrame缺失值的查找与填充示例讲解
2018/11/06 Python
Python提取转移文件夹内所有.jpg文件并查看每一帧的方法
2019/06/27 Python
解决Django 在ForeignKey中出现 non-nullable field错误的问题
2019/08/06 Python
python爬虫 批量下载zabbix文档代码实例
2019/08/21 Python
python+selenium爬取微博热搜存入Mysql的实现方法
2021/01/27 Python
伯利陶器:Burleigh Pottery
2018/01/03 全球购物
土耳其国际性时尚购物网站:Modanisa
2018/01/19 全球购物
RealTek面试题
2016/06/28 面试题
软件设计的目标是什么
2016/12/04 面试题
党的群众路线教育实践活动学习笔记范文
2014/11/06 职场文书
新年晚会主持词开场白
2015/05/28 职场文书
2016大一新生入学教育心得体会
2016/01/23 职场文书
《我在为谁工作》:工作的质量往往决定生活的质量
2019/12/27 职场文书
windows11怎么查看wifi密码? win11查看wifi密码的技巧
2021/11/21 数码科技
python中的3种定义类方法
2021/11/27 Python
CentOS安装Nginx并部署vue
2022/04/12 Servers