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

更新时间：2024年07月03日 16:55:45 投稿：lijiao

这篇文章主要介绍了基于javascript实现tab选项卡切换特效调试笔记，具有一定的参考价值，感兴趣的小伙伴们可以参考一下

本文实例为大家分析了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="#">六旬老人遇老相识</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>
  </ul>
  </div>
  <div id="l_no2_3" class="eachDiv" style="display: none">
   <img src="../images/hao123/25.3.jpg" width="274px">
  </div>
  <div id="l_no2_4" class="eachDiv" style="display: none">
   <img src="../images/hao123/25.4.jpg" width="274px">
  </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="#"></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>

调试笔记：

1.错误一：

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

（1）报错：

（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实现网站加入收藏功能的相关资料,需要的朋友可以参考下
2015-12-12
元素全屏的设置与监听实例
下面小编就为大家带来一篇元素全屏的设置与监听实例，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
2017-11-11
js倒计时抢购实例
这篇文章主要介绍了js倒计时简单实现方法，方便一些提示重要日期的来临，本实例特别适合用于商品倒计时抢购活动，感兴趣的小伙伴们可以参考一下
2015-12-12
JavaScript setinterval延迟一秒解决方案
这篇文章主要介绍了JavaScript setinterval延迟一秒解决方案,本篇文章通过简要的案例,讲解了该项技术的了解与使用,以下就是详细内容,需要的朋友可以参考下
2021-09-09
package.json与package-lock.json的区别及详细解释
不知道大家平时在开发中有没有注意到,你的项目中有两个文件:package.json,package-lock.json,应该很多人平时都不会去关注这两个文件有啥关系吧,这篇文章主要给大家介绍了关于package.json与package-lock.json的区别及详细解释,需要的朋友可以参考下
2022-08-08
深入探讨JavaScript中Class的语法与使用
这篇文章将带大家深入探讨 class 在 JavaScript 中的作用、语法和使用方法，并与 ES5 构造函数进行对比，希望可以帮助大家更好地理解和应用类的概念
2023-06-06
JavaScript中扩展Array contains方法实例
这篇文章主要介绍了JavaScript中扩展Array contains方法实例,本文直接给出实现代码,需要的朋友可以参考下
2015-03-03
js实现DOM走马灯特效的方法
这篇文章主要介绍了js实现DOM走马灯特效的方法,以实例形式较为详细的分析了走马灯效果的实现原理与具体步骤,具有一定参考借鉴价值,需要的朋友可以参考下
2015-01-01
JavaScript实现简单获取当前网页网址的方法
这篇文章主要介绍了JavaScript实现简单获取当前网页网址的方法,通过location对象的href方法来获取网址,非常简单实用,需要的朋友可以参考下
2015-11-11
ES6中字符串的使用方法扩展
这篇文章主要给大家介绍了关于ES6中字符串的相关资料，文中通过示例代码介绍的非常详细，对大家学习或者使用ES6具有一定的参考学习价值，需要的朋友们下面来一起学习学习吧
2019-06-06

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

相关文章

最新评论

大家感兴趣的内容

最近更新的内容

常用在线小工具