基于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 相关文章推荐
User Scripts: Video Download by User Scripts
May 14 Javascript
ExtJS Window 最小化的一种方法
Nov 18 Javascript
关于IE浏览器以及Firefox下的javascript冒泡事件的响应层级
Oct 14 Javascript
EASYUI TREEGRID异步加载数据实现方法
Aug 22 Javascript
两个select多选模式的选项相互移动(示例代码)
Jan 11 Javascript
在JS中如何调用JSP中的变量
Jan 22 Javascript
bootstrap modal+gridview实现弹出框效果
Aug 15 Javascript
微信小程序实现表单校验功能
Mar 30 Javascript
js 中rewrap-ajax.js插件实例代码
Oct 20 Javascript
让Vue也可以使用Redux的方法
May 23 Javascript
原生javascript中this几种常见用法总结
Feb 24 Javascript
详解JS函数防抖
Jun 05 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
查找mysql字段中固定字符串并替换的几个方法
2012/09/23 PHP
php setcookie函数的参数说明及其用法
2014/04/20 PHP
微信接口生成带参数的二维码
2017/07/31 PHP
一些mootools的学习资源
2010/02/07 Javascript
对xmlHttp对象方法和属性的理解
2011/01/17 Javascript
jquery attr 设定src中含有&amp;(宏)符号问题的解决方法
2011/07/26 Javascript
解析使用JS 清空File控件的路径值
2013/07/08 Javascript
关于include标签导致js路径找不到的问题分析及解决
2013/07/09 Javascript
bootstrap布局中input输入框右侧图标点击功能
2016/05/16 Javascript
jQuery中事件与动画的总结分享
2016/05/24 Javascript
微信小程序使用Promise简化回调
2018/02/06 Javascript
原生js实现省市区三级联动代码分享
2018/02/12 Javascript
详解Vue CLI3配置解析之css.extract
2018/09/14 Javascript
解决echarts图表使用v-show控制图表显示不全的问题
2020/07/19 Javascript
解决vue-loader加载不上的问题
2020/10/21 Javascript
微信小程序接入vant Weapp组件的详细步骤
2020/10/28 Javascript
Javascript节流函数throttle和防抖函数debounce
2020/12/03 Javascript
学习python之编写简单简单连接数据库并执行查询操作
2016/02/27 Python
Python用imghdr模块识别图片格式实例解析
2018/01/11 Python
python生成器,可迭代对象,迭代器区别和联系
2018/02/04 Python
Python实现对一个函数应用多个装饰器的方法示例
2018/02/09 Python
安装python时MySQLdb报错的问题描述及解决方法
2018/03/20 Python
基于python 二维数组及画图的实例详解
2018/04/03 Python
把csv文件转化为数组及数组的切片方法
2018/07/04 Python
使用npy转image图像并保存的实例
2020/07/01 Python
五款漂亮的纯CSS3动画按钮的实例教程
2014/11/21 HTML / CSS
美国最灵活的移动提供商:Tello
2017/07/18 全球购物
简单说下OSPF的操作过程
2014/08/13 面试题
护理自荐信范文
2013/10/05 职场文书
技术学校毕业生求职信分享
2013/12/02 职场文书
本科生职业生涯规划书范文
2014/01/21 职场文书
《老山界》教学反思
2014/04/08 职场文书
酒店管理专业自荐信
2014/05/23 职场文书
颐和园的导游词
2015/01/30 职场文书
2015年学雷锋活动总结
2015/02/06 职场文书
Java 中的 Unsafe 魔法类的作用大全
2021/06/26 Java/Android