基于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 相关文章推荐
javascript 函数速查表
Feb 07 Javascript
在JS中解析HTML字符串示例代码
Apr 16 Javascript
jQuery实现表格展开与折叠的方法
May 04 Javascript
JS组件Bootstrap实现下拉菜单效果代码
Apr 26 Javascript
使用JQuery 加载页面时调用JS的实现方法
May 30 Javascript
JS实现的随机排序功能算法示例
Jun 09 Javascript
React学习笔记之列表渲染示例详解
Aug 22 Javascript
JQuery实现table中tr上移下移的示例(超简单)
Jan 08 jQuery
微信小程序实现分享到朋友圈功能
Jul 19 Javascript
在vue中获取微信支付code及code被占用问题的解决方法
Apr 16 Javascript
全面分析JavaScript 继承
May 30 Javascript
JavaScript实现队列结构过程
Dec 06 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
咖啡与水的关系
2021/03/03 冲泡冲煮
php 获取本机外网/公网IP的代码
2010/05/09 PHP
教你如何使用php session
2013/10/28 PHP
PHP SPL使用方法和他的威力
2013/11/12 PHP
PHP header()函数常用方法总结
2014/04/11 PHP
PHP开发Apache服务器配置
2015/07/15 PHP
PHP 二维数组和三维数组的过滤
2016/03/16 PHP
LNMP部署laravel以及xhprof安装使用教程
2017/09/14 PHP
Dom在ajax技术中的作用说明
2010/10/25 Javascript
js冒泡法和数组转换成字符串示例代码
2013/08/14 Javascript
js 文本滚动效果的实例代码
2013/08/17 Javascript
键盘KeyCode值列表汇总
2013/11/26 Javascript
封装了一个支持匿名函数的Javascript事件监听器
2014/06/05 Javascript
jquery操作HTML5 的data-*的用法实例分享
2014/08/17 Javascript
Underscore源码分析
2015/12/30 Javascript
js 截取或者替换字符串中的数字实现方法
2016/06/13 Javascript
详解Vue2.0里过滤器容易踩到的坑
2017/06/01 Javascript
jQuery实现checkbox的简单操作
2017/11/18 jQuery
webpack开发环境和生产环境的深入理解
2018/11/08 Javascript
简单了解node npm cnpm的具体使用方法
2019/02/27 Javascript
JS中超越现实的匿名函数用法实例分析
2019/06/21 Javascript
Python编程给numpy矩阵添加一列方法示例
2017/12/04 Python
查看django版本的方法分享
2018/05/14 Python
Scrapy-Redis结合POST请求获取数据的方法示例
2019/05/07 Python
pytorch中tensor.expand()和tensor.expand_as()函数详解
2019/12/27 Python
python3中编码获取网页的实例方法
2020/11/16 Python
全球性的在线购物网站:Zapals
2017/03/22 全球购物
Java语言程序设计测试题判断题部分
2013/01/06 面试题
机械设计及其自动化专业推荐信
2013/10/31 职场文书
会计学应届毕业生推荐信
2013/11/04 职场文书
缴纳养老保险的证明
2014/01/10 职场文书
歌颂祖国的演讲稿
2014/05/04 职场文书
汉语言文学专业求职信
2014/06/19 职场文书
地方课程教学计划
2015/01/19 职场文书
2015年大学班级工作总结
2015/04/28 职场文书
2016年6.5世界环境日宣传活动总结
2016/04/01 职场文书