JavaScript
搜索
分类

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

作者：lijiao 时间：2024-06-12 13:48:02　

本文实例为大家分析了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,tab,切换
0
投稿

猜你喜欢

  • 从django的中间件直接返回请求的方法

    2022-02-04 23:32:23

  • 如何把外网python虚拟环境迁移到内网

    2021-12-28 14:08:13

  • python的time模块和datetime模块实例解析

    2023-11-13 09:54:56

  • Oracle性能究极优化 下

    2010-07-30 13:25:00

  • sqlserver2005 TSql新功能学习总结(数据类型篇)

    2024-01-28 10:46:07

  • Python实现针对中文排序的方法

    2022-04-20 23:21:51

  • python commands模块的适用方式

    2022-02-26 19:38:14

  • Python 字符串与数字输出方法

    2021-09-01 09:01:59

  • rollup打包vue组件并发布到npm的方法

    2024-05-22 10:43:32

  • zabbix进行数据库备份以及表分区的方法

    2024-01-16 13:01:46

  • js实现select二级联动下拉菜单

    2024-04-17 09:49:51

  • 浅谈django的render函数的参数问题

    2022-07-10 18:39:20

  • MYSQL server has gone away解决办法

    2010-11-25 17:22:00

  • MySql修改数据库编码为UTF8避免造成乱码问题

    2024-01-24 22:11:59

  • 浅谈django model postgres的json字段编码问题

    2021-12-21 13:55:12

  • 对python pandas读取剪贴板内容的方法详解

    2023-07-11 09:15:45

  • Django用户认证系统 组与权限解析

    2022-05-06 06:10:22

  • 在 Django/Flask 开发服务器上使用 HTTPS

    2023-02-21 22:15:33

  • SQL Server 使用join all优化 or 查询速度

    2024-01-26 09:11:37

  • Python入门基本操作列表排序用法详解

    2021-01-02 15:42:02
    • asp之家 网络编程 m.aspxhome.com