基于javascript实现tab选项卡切换特效调试笔记


Posted in Javascript onMarch 30, 2016

本文实例为大家分析了javascript实现tab选项卡切换的调试笔记,供大家参考,具体内容如下

制作导航栏,点击导航栏元素时下面的内容会产生相应的变化,并且该元素显示特殊样式。

js源代码:

//导航栏单击变换内容
function tabSwitch(_this,num) {
 var tag = document.getElementById("nav9");
 var number = tag.getElementsByTagName("a"); //获取导航栏元素个数(getElementsByTagName是返回元素素组)
 var divNum = document.getElementsByClassName("eachDiv"); //获取导航元素对应的div个数
 for(var i=0;i<number.length;i++){ //number是一个数组,这里应该用number.length显示它的长度5
  number[i].className = " "; //清除所有导航栏元素的特殊样式
  divNum[i].style.display = "none"; //其他所有div都隐藏
 }
 _this.className = "l_nav1_no1"; //给当前导航栏元素添加样式
 var content = document.getElementById("l_no2_"+num); //当前导航栏元素对应的div
 content.style.display = "block"; //显示当前导航栏元素对应的div部分
}

HTML代码:

<!DOCTYPE html>
<html>
<head lang="en">
 <meta charset="UTF-8">
 <title></title>
 <script type="text/javascript" src="../MyJS/hao123.js"></script>
 <style type="text/css">
  .l_nav1 {
   height: 30px;
   padding-top: 8px;
  }
  .l_nav1 a{
   color: #3C3C3C;
   text-decoration: none;
   padding: 8px;
  }
  .l_nav1 a:hover,#l_nav1 a:active {
   color: green;
   text-decoration: underline;
  }
  .l_nav1 .l_nav1_no1 { /*“头条”*/
   color: green;
   text-decoration: none;
   border-top: solid 1px green;
  }

  .l_no2 {
   background-color: #ffffff;
   border: solid 1px #E0E0E0;
   height: 282px;
   width: 276px;
   overflow: scroll; /*当元素内容太大而超出规定区域时,内容会被修剪,但是浏览器会显示滚动条以便查看其余的内容。。*/
  }
  .l_no2 ul{  /*列表部分*/
   padding-left: 0px;
   line-height: 25px;
   font-size: 14px;;
  }
  .l_no2 ul li{
   list-style: none;
  }
  .l_no2 ul a{
   color: #3C3C3C;
   text-decoration: none;
  }
  .l_no2 ul a:active,.l_no2 ul a:hover {
   color: red;
   text-decoration: underline;
  }
 </style>
</head>
<body>
 <nav id="nav9" class="l_nav1">
  <a href="#" onclick="tabSwitch(this,1)" class="l_nav1_no1">头条</a>
  <a href="#" onclick="tabSwitch(this,2)">社会</a>
  <a href="#" onclick="tabSwitch(this,3)">娱乐</a>
  <a href="#" onclick="tabSwitch(this,4)">军事</a>
  <a href="#" onclick="tabSwitch(this,5)">体育</a>
 </nav>
 <div class="l_no2">
  <div id="l_no2_1" class="eachDiv" style="display: block"> <!--默认为该div显示-->
   <img src="../images/hao123/25.jpg" width="274px">
   <ul>
    <li><strong style="color: #6C6C6C">·</strong><a href="#">县领导找不着住建局长 对其通报批评</a></li>
    <li><strong style="color: #6C6C6C">·</strong><a href="#">女子亲热感觉"卡" 检查现"异形"侵体</a></li>
    <li><strong style="color: #6C6C6C">·</strong><a href="#">大妈被女童玩具小车撞到 叫来救护车</a></li>
    <li><strong style="color: #6C6C6C">·</strong><a href="#">六旬老人遇老相识 30元发生关系被抓</a></li>
   </ul>
  </div>
  <div id="l_no2_2" class="eachDiv" style="display: none">
   <img src="../images/hao123/25.2.jpg" width="274px">
   <ul>
    <li><strong style="color: #6C6C6C">·</strong><a href="#">妻子产子收1200枚鸡蛋 丈夫1天卖光</a></li>
    <li><strong style="color: #6C6C6C">·</strong><a href="#">母猪产下八名男婴 原因竟然如此凄凉</a></li>
    <li><strong style="color: #6C6C6C">·</strong><a href="#">小夫妻宾馆开房 隔壁大叔全程看直播</a></li>
    <li><strong style="color: #6C6C6C">·</strong><a href="#">老汉自造房车囚禁两妙龄女 边走边玩</a></li>
   </ul>
  </div>
  <div id="l_no2_3" class="eachDiv" style="display: none">
   <img src="../images/hao123/25.3.jpg" width="274px">
   <ul>
    <li><strong style="color: #6C6C6C">·</strong><a href="#">金星追问陈坤儿子生母 他还真招认了</a></li>
    <li><strong style="color: #6C6C6C">·</strong><a href="#">台湾女星“酒后乱性” 婆婆当场傻眼</a></li>
    <li><strong style="color: #6C6C6C">·</strong><a href="#">车晓和前夫离婚后 如此评价这段经历</a></li>
    <li><strong style="color: #6C6C6C">·</strong><a href="#">韩国卖淫女星身份遭曝光!G.NA在列</a></li>
   </ul>
  </div>
  <div id="l_no2_4" class="eachDiv" style="display: none">
   <img src="../images/hao123/25.4.jpg" width="274px">
   <ul>
    <li><strong style="color: #6C6C6C">·</strong><a href="#">朝鲜愤然击落美军侦察机 美为何认怂</a></li>
    <li><strong style="color: #6C6C6C">·</strong><a href="#">多数人不知道 中国已经买过四艘航母</a></li>
    <li><strong style="color: #6C6C6C">·</strong><a href="#">中国两栖登陆王牌协同作战 场面壮观</a></li>
    <li><strong style="color: #6C6C6C">·</strong><a href="#">朝鲜惊人作战计划曝光:突袭朴槿惠</a></li>
   </ul>
  </div>
  <div id="l_no2_5" class="eachDiv" style="display: none">
   <img src="../images/hao123/25.5.jpg" width="274px">
   <ul>
    <li><strong style="color: #6C6C6C">·</strong><a href="#">末战胜卡塔尔不够 国足期待2队犯错</a></li>
    <li><strong style="color: #6C6C6C">·</strong><a href="#">赛中产子属误传 产妇是辽宁女排队员</a></li>
    <li><strong style="color: #6C6C6C">·</strong><a href="#">球迷50万赌国足赢4球以上 血本无归</a></li>
    <li><strong style="color: #6C6C6C">·</strong><a href="#">高洪波:国足只能算一般队 比较命苦</a></li>
   </ul>
  </div>
 </div>
</body>
</html>

效果图:

 基于javascript实现tab选项卡切换特效调试笔记

调试笔记:

1.错误一:

var number = tag.getElementsByTagName("a").length;  

(1)报错:

基于javascript实现tab选项卡切换特效调试笔记     

(2)解释及改正:

**getElementsByTagName()就是返回元素素组,如果再取它的长度的话,number就只是一个数字,所以number[i].className = " ";就会报错。**

改正:

 var number = tag.getElementsByTagName("a");

2.错误二:

for(var i=0;i<number;i++){ 
  number[i].className = " "; //清除所有导航栏元素的特殊样式
  divNum[i].style.display = "none"; //其他所有div都隐藏
 }

这里的number应该是一个数字,代表a元素的个数,由错误一可知,获取number的长度,即应该改为:

for(var i=0;i<number.length;i++){ //number是一个数组
  number[i].className = " "; //清除所有导航栏元素的特殊样式
   divNum[i].style.display = "none"; //其他所有div都隐藏
  }

以上就是本文的全部内容,希望对大家的学习有所帮助。

Javascript 相关文章推荐
jQuery 注意事项 与原因分析
Apr 24 Javascript
jQuery版仿Path菜单效果
Dec 15 Javascript
jquery实现先淡出再折叠收起的动画效果
Aug 07 Javascript
jquery带有索引按钮且自动轮播切换特效代码分享
Sep 15 Javascript
Bootstrap学习笔记之js组件(4)
Jun 12 Javascript
vue.js初学入门教程(2)
Nov 07 Javascript
javascript观察者模式实现自动刷新效果
Sep 05 Javascript
详解node服务器中打开html文件的两种方法
Sep 18 Javascript
vue-cli webpack模板项目搭建及打包时路径问题的解决方法
Feb 26 Javascript
探秘vue-rx 2.0(推荐)
Sep 21 Javascript
ES5新增数组的实现方法
May 12 Javascript
React Native登录之指纹登录篇的示例代码
Nov 03 Javascript
javascript实现数字倒计时特效
Mar 30 #Javascript
基于javascript实现样式清新图片轮播特效
Mar 30 #Javascript
网页中JS函数自动执行常用三种方法
Mar 30 #Javascript
Jquery轮播效果实现过程解析
Mar 30 #Javascript
修复jQuery tablesorter无法正确排序的bug(加千分位数字后)
Mar 30 #Javascript
JavaScript 经典实例日常收集整理(常用经典)
Mar 30 #Javascript
JavaScript 浏览器兼容性总结及常用浏览器兼容性分析
Mar 30 #Javascript
You might like
Wordpress 相册插件 NextGEN-Gallery 添加目录将中文转为拼音的解决办法
2010/12/29 PHP
PHP分多步骤填写发布信息的简单方法实例代码
2012/09/23 PHP
PHP 关于访问控制的和运算符优先级介绍
2013/07/08 PHP
搜索附近的人PHP实现代码
2018/02/11 PHP
动态加载js的几种方法
2006/10/23 Javascript
抽出www.templatemonster.com的鼠标悬停加载大图模板的代码
2007/07/11 Javascript
分享一个自定义的console类 让你不再纠结JS中的调试代码的兼容
2012/04/20 Javascript
关于火狐(firefox)及ie下event获取的两种方法
2012/12/27 Javascript
JS对select控件option选项的增删改查示例代码
2013/10/21 Javascript
Jquery中$.post和$.ajax的用法小结
2015/04/28 Javascript
自己动手制作基于jQuery的Web页面加载进度条插件
2016/06/03 Javascript
详解BootStrap中Affix控件的使用及保持布局的美观的方法
2016/07/08 Javascript
js移动焦点到最后位置的简单方法
2016/11/25 Javascript
jQuery Validate表单验证插件的基本使用方法及功能拓展
2017/01/04 Javascript
JS实现的加减乘除四则运算计算器示例
2017/08/09 Javascript
Angular实现的日程表功能【可添加及隐藏显示内容】
2017/12/27 Javascript
webpack-dev-server自动更新页面方法
2018/02/22 Javascript
vue项目打包后打开页面空白解决办法
2018/06/29 Javascript
JavaScript设计模式之工厂模式和抽象工厂模式定义与用法分析
2018/07/26 Javascript
浅谈Node 异步IO和事件循环
2019/05/05 Javascript
node.js开发辅助工具nodemon安装与配置详解
2020/02/06 Javascript
JavaScript中reduce()的5个基本用法示例
2020/07/19 Javascript
JavaScript实现筛选数组
2021/03/02 Javascript
Python实现LRU算法的2种方法
2015/06/24 Python
Python selenium的基本使用方法分析
2019/12/21 Python
python 子类调用父类的构造函数实例
2020/03/12 Python
Python 如何调试程序崩溃错误
2020/08/03 Python
Canvas 帧动画吃苹果小游戏
2020/08/05 HTML / CSS
交通事故私了协议书
2014/04/16 职场文书
幼儿园六一儿童节活动方案
2014/08/26 职场文书
运动会400米加油稿(8篇)
2014/09/22 职场文书
毕业论文指导教师评语
2014/12/30 职场文书
2015元旦感言
2015/12/09 职场文书
python 实现mysql自动增删分区的方法
2021/04/01 Python
SpringBoot集成Redis,并自定义对象序列化操作
2021/06/22 Java/Android
Python爬虫入门案例之爬取二手房源数据
2021/10/16 Python