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 相关文章推荐
Jquery 一次处理多个ajax请求的代码
Sep 02 Javascript
更优雅的事件触发兼容
Oct 24 Javascript
找出字符串中出现次数最多的字母和出现次数精简版
Nov 07 Javascript
jQuery ui插件的使用方法代码实例
May 08 Javascript
Jquery动态改变图片IMG的src地址示例
Jun 25 Javascript
jquery处理json对象
Nov 03 Javascript
JavaScript中的关联数组问题
Mar 04 Javascript
详解vue2.0脚手架的webpack 配置文件分析
May 27 Javascript
使用Vue自定义数字键盘组件(体验度极好)
Dec 19 Javascript
浅谈vue引入css,less遇到的坑和解决方法
Jan 20 Javascript
详解vue 数组和对象渲染问题
Sep 21 Javascript
如何用JS实现简单的数据监听
May 06 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 md5下16位和32位的实现代码
2008/04/09 PHP
PHP中PDO基础教程 入门级
2011/09/04 PHP
PHP调试函数和日志记录函数分享
2015/01/31 PHP
php选择排序法实现数组排序实例分析
2015/02/16 PHP
php实现插入数组但不影响原有顺序的方法
2015/03/27 PHP
typecho插件编写教程(六):调用接口
2015/05/28 PHP
PHP实现的基于单向链表解决约瑟夫环问题示例
2017/09/30 PHP
PHP 数组黑名单/白名单实例代码详解
2019/06/04 PHP
laravel5.0在linux下解决.htaccess无效和去除index.php的问题
2019/10/16 PHP
JavaScript中的事件处理
2008/01/16 Javascript
javascript级联下拉列表实例代码(自写)
2013/05/10 Javascript
动态读取JSON解析键值对的方法
2014/06/03 Javascript
我的Node.js学习之路(四)--单元测试
2014/07/06 Javascript
纯Javascript实现ping功能的方法
2015/03/20 Javascript
JS实现带有抽屉效果的产品类网站多级导航菜单代码
2015/09/15 Javascript
微信小程序入门教程
2016/11/18 Javascript
jQuery实现模拟flash头像裁切上传功能示例
2016/12/11 Javascript
Vue封装Swiper实现图片轮播效果
2018/02/06 Javascript
基于vue和react的spa进行按需加载的实现方法
2018/09/29 Javascript
Vue2(三)实现子菜单展开收缩,带动画效果实现方法
2019/04/28 Javascript
eslint 的三大通用规则详解
2019/05/16 Javascript
微信小程序实现打卡签到页面
2020/09/21 Javascript
JS实现购物车基本功能
2020/11/08 Javascript
用Python的Django框架来制作一个RSS阅读器
2015/07/22 Python
Python简单实现两个任意字符串乘积的方法示例
2018/04/12 Python
Python实现 PS 图像调整中的亮度调整
2019/06/28 Python
Python中的 is 和 == 以及字符串驻留机制详解
2019/06/28 Python
Python StringIO如何在内存中读写str
2020/01/07 Python
flask框架自定义url转换器操作详解
2020/01/25 Python
通过Turtle库在Python中绘制一个鼠年福鼠
2020/02/03 Python
wxPython修改文本框颜色过程解析
2020/02/14 Python
详解Python多线程下的list
2020/07/03 Python
霸气押韵的班级口号
2014/06/09 职场文书
师范学院毕业生求职信
2014/06/24 职场文书
MySQL学习之基础操作总结
2022/03/19 MySQL
日本十大血腥动漫,那些被禁播的动漫盘点
2022/03/21 日漫