基于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使用查询手册
Mar 07 Javascript
用jQuery实现检测浏览器及版本的脚本代码
Jan 22 Javascript
ASP SQL防注入的方法
Dec 25 Javascript
Jquery增加鼠标中间功能mousewheel的实例代码
Sep 05 Javascript
BootStrap中
Dec 10 Javascript
Vue+webpack项目基础配置教程
Feb 12 Javascript
layDate插件设置开始和结束时间
Nov 15 Javascript
javascript实现遮罩层动态效果实例
May 14 Javascript
详解express使用vue-router的history踩坑
Jun 05 Javascript
js找出5个数中最大的一个数和倒数第二大的数实现方法示例小结
Mar 04 Javascript
vue如何搭建多页面多系统应用
Jun 17 Javascript
手写Spirit防抖函数underscore和节流函数lodash
Mar 22 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
php实现比较全的数据库操作类
2015/06/18 PHP
Yii开启片段缓存的方法
2016/03/28 PHP
php用户登录之cookie信息安全分析
2016/05/13 PHP
详谈phpAdmin修改密码后拒绝访问的问题
2017/04/03 PHP
PHP中时间加减函数strtotime用法分析
2017/04/26 PHP
jQuery.autocomplete 支持中文输入(firefox)修正方法
2011/03/10 Javascript
使用js正则控制input标签只允许输入的值
2013/07/29 Javascript
jQuery实现点击后标记当前菜单位置(背景高亮菜单)效果
2015/08/22 Javascript
javascript中的正则表达式使用详解
2015/08/30 Javascript
jquery单击事件和双击事件冲突解决方案
2016/03/02 Javascript
基于javascript实现tab切换特效
2016/03/29 Javascript
原生态js,鼠标按下后,经过了那些单元格的简单实例
2016/08/11 Javascript
vue2+el-menu实现路由跳转及当前项的设置方法实例
2017/11/07 Javascript
js正则取值的结果数组调试方法
2018/10/10 Javascript
vue router总结 $router和$route及router与 router与route区别
2019/07/05 Javascript
jQuery实现图片下载代码
2019/07/18 jQuery
详解mpvue开发微信小程序基础知识
2019/09/23 Javascript
Vue解决echart在element的tab切换时显示不正确问题
2020/08/03 Javascript
vue实现简易的双向数据绑定
2020/12/29 Vue.js
[03:28]2014DOTA2国际邀请赛 走近EG战队天才中单Arteezy
2014/07/12 DOTA
[09:59]DOTA2-DPC中国联赛2月7日Recap集锦
2021/03/11 DOTA
11月编程语言排行榜 Python逆袭C#上升到第4
2017/11/15 Python
Python内置函数 next的具体使用方法
2017/11/24 Python
使用pygame模块编写贪吃蛇的实例讲解
2018/02/05 Python
Python numpy实现二维数组和一维数组拼接的方法
2018/06/05 Python
python 将json数据提取转化为txt的方法
2018/10/26 Python
django中使用POST方法获取POST数据
2019/08/20 Python
深入浅析CSS3中的Flex布局整理
2020/04/27 HTML / CSS
深圳-东方伟业笔试部分
2015/02/11 面试题
《三峡》教学反思
2014/03/01 职场文书
经贸日语专业自荐信
2014/09/02 职场文书
办理房产证委托书
2014/09/18 职场文书
2015年班干部工作总结
2015/04/29 职场文书
女方离婚起诉书
2015/05/18 职场文书
2015年四年级班主任工作总结
2015/10/22 职场文书
python批量更改目录名/文件名的方法
2021/04/18 Python