單擊可顯示/隱藏帶有Java的Divs

Question

我試圖僅使用Javascript在單擊時顯示/隱藏選項卡，但出現錯誤（“未捕獲的TypeError：無法設置未定義選項卡的屬性'className'。（匿名函數）.onclick”）。 有人可以告訴我這個問題可能是什么嗎？

<style>
    a { text-decoration: none; }
    li { list-style: none; }
    li.selected { font-weight: bold; } 
    .panels div { display: none; }
    .panels .selected { display: block; }
</style>

<div id="tabs" class="tabs">
    <ul>
        <li class="selected"><a href="javascript:;">One</a></li>
        <li class=""><a href="javascript:;">Two</a></li>
        <li class=""><a href="javascript:;">Three</a></li>
    </ul>
</div>

<div id="panels" class="panels">
    <div class="selected">This is panel one.</div>
    <div class="">This is panel two.</div>
    <div class="">This is panel three.</div>
</div>

<script>
    var tabs = document.getElementById("tabs").getElementsByTagName("li");
    var panels = document.getElementById("panels").getElementsByTagName("div");
    for (var i = 0; i < tabs.length; i++) {
        new function(i) {
            tabs[i].onclick = function() {
                tabs[i].className = panels[i].className = "selected";
                for (var i = 0; i < panels.length; i++) {
                tabs[i].className = panels[i].className = "";
                }
            }
        }(i);
    }
</script>

Answer 1

您的內部for循環具有一個i變量，該變量與同名的for循環的外部變量沖突。

在將單擊的元素設置為“選定”之前，還應該從所有元素中刪除選定的類。

嘗試：

<script>
    var tabs = document.getElementById("tabs").getElementsByTagName("li");
    var panels = document.getElementById("panels").getElementsByTagName("div");
    for (var i = 0; i < tabs.length; i++) {
        new function(i) {
            tabs[i].onclick = function() {
                for (var j = 0; j < panels.length; j++) {
                    tabs[j].className = panels[j].className = "";
                }
                tabs[i].className = panels[i].className = "selected";
            }
        }(i);
    }
</script>

Answer 2

正如您所期望的那樣，下面的內容將起作用。 我在訪問for循環內的HTML元素時發現了兩個問題，您需要使用.item（）作為要獲取的HTMLCollection而不是數組。 同樣，您的內部for循環需要使用不同的循環索引，另外還有一個if條件，以保持單擊狀態不變，如圖所示，使其保持隱藏狀態。

<style>
    a { text-decoration: none; }
    li { list-style: none; }
    li.selected { font-weight: bold; } 
    .panels div { display: none; }
    .panels .selected { display: block; }
</style>

<div id="tabs" class="tabs">
    <ul>
        <li class="selected"><a href="javascript:;">One</a></li>
        <li class=""><a href="javascript:;">Two</a></li>
        <li class=""><a href="javascript:;">Three</a></li>
    </ul>
</div>

<div id="panels" class="panels">
    <div class="selected">This is panel one.</div>
    <div class="">This is panel two.</div>
    <div class="">This is panel three.</div>
</div>

<script>
    var tabs = document.getElementById("tabs").getElementsByTagName("li");
    var panels = document.getElementById("panels").getElementsByTagName("div");
    for (var i = 0; i < tabs.length; i++) {
        new function(i) {
            tabs[i].onclick = function() {
                tabs.item(i).className = panels.item(i).className = "selected";
                for (var j = 0; j < panels.length; j++) {
                    if(i!=j){
                        tabs.item(j).className = panels.item(j).className = "";
                    }
                }
            }
        }(i);
    }
</script>

Answer 3

您有幾個問題：

• 多個i變量
• new function(i) {...}不是最佳語法。 我在下面使用了閉包
• 每行多次分配是不好的

我已經給了您<li>元素值，以便我們可以知道哪個li元素已經被點擊了

  var tabs = document.getElementById("tabs").getElementsByTagName("li"); var panels = document.getElementById("panels").getElementsByTagName("div"); for (var i = 0; i < panels.length; i++) { (function(i) { tabs[i].onclick = function() { var j; var panelIndex; // remove styles from other tabs for (j = 0; j < tabs.length; j++) { tabs[j].className = ""; } // apply style to the current tab: 'this' this.className = "selected"; // hide other panels for (j = 0; j < panels.length; j++) { panels[j].className = ""; } // show the selected panel panelIndex = +this.value; // convert value to number panels[panelIndex-1].className="selected"; // arrays are 0-indexed, so subtract 1 } })(i); } 

 a { text-decoration: none; } li { list-style: none; } li.selected { font-weight: bold; } .panels div { display: none; } .panels .selected { display: block; } 

 <div id="tabs" class="tabs"> <ul> <li value="1" class="selected"><a href="javascript:;">One</a></li> <li value="2" class=""><a href="javascript:;">Two</a></li> <li value="3" class=""><a href="javascript:;">Three</a></li> </ul> </div> <div id="panels" class="panels"> <div class="selected">This is panel one.</div> <div class="">This is panel two.</div> <div class="">This is panel three.</div> </div>