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

前端技术 2023/09/05 JavaScript

本文实例为大家分析了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>

效果图：

 

调试笔记：

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都隐藏
  }

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

本文地址：https://www.stayed.cn/item/14165

转载请注明出处。

本站部分内容来源于网络,如侵犯到您的权益,请 联系我

我的博客

人生若只如初见，何事秋风悲画扇。

我的标签

随笔档案