ホームページ >ウェブフロントエンド >jsチュートリアル >javascript_javascript スキルに基づくタブ切り替えの特殊効果のデバッグに関するメモ

javascript_javascript スキルに基づくタブ切り替えの特殊効果のデバッグに関するメモ

WBOYオリジナル: 2016-05-16 15:07:291657ブラウズ

この記事の例では、タブ切り替えを実装するための JavaScript のデバッグメモを分析しています。具体的な内容は次のとおりです。

ナビゲーションバーを作成します。ナビゲーションバー要素をクリックすると、それに応じて下のコンテンツが変更され、要素に特別なスタイルが表示されます。

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. 間違い 1:

変数番号 = tag.getElementsByTagName("a").length;

(1) エラーレポート:

(2) 説明と訂正:

**getElementsByTagName() は要素グループを返します。その長さを取得すると、number は単なる数値であるため、number[i].className = " "; はエラーを報告します。 **

訂正:

変数番号 = tag.getElementsByTagName("a");

2. 間違い 2:

 for(var i=0;i<number;i++){ 
  number[i].className = " "; //清除所有导航栏元素的特殊样式
  divNum[i].style.display = "none"; //其他所有div都隐藏
 }

ここでの数値は、a の要素の数を表す数値である必要があります。エラー 1 から、数値の長さを取得するには、次のように変更する必要があることがわかります。

for(var i=0;i<number.length;i++){ //number是一个数组
  number[i].className = " "; //清除所有导航栏元素的特殊样式
   divNum[i].style.display = "none"; //其他所有div都隐藏
  }

以上がこの記事の全内容です。皆様の学習のお役に立てれば幸いです。

声明：

この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。

前の記事：React.js 入門パート 1_JavaScript スキル次の記事：React.js 入門パート 1_JavaScript スキル

続きを見る

javascript_javascript スキルに基づくタブ切り替えの特殊効果のデバッグに関するメモ

関連記事