我嘗試使用Js和CSS創建Tab，但它們無法正常工作

Question

我有一個大學項目，打算僅使用HTML，CSS和Js創建一個網站。 我正在嘗試創建一家商店，並且希望使用標簽（就像頁面一樣）划分產品，但是現在我無法做到這一點，單擊按鈕不會做任何事情。

我嘗試遵循w3schools.com的指南，但無濟於事。

HTML：

<div class="options">

<div id="page1" class="tabcontent">
    <ul>
        <li class="item">
            <a href="#product"><img src="loja/roupa/topproducts/avt486_a.jpg"></a>
            <div class="productinfo">
                <h2>
                    <a href="#product" class="productname">
                        The Avett Brothers<br/>
                        Bowen Hoodie
                    </a>
                </h2>
                <div class="price">
                    <a href="#product">
                        <h2>60.00€</h2>
                    </a>                                
                </div>
                <div class="buybutton">
                    <button class="button">Buy</button>
                </div>
            </div>
        </li>
        <li class="item">
            <a href="#product"><img src="loja/roupa/topproducts/avt504.jpg"></a>
            <div class="productinfo">
                <h2>
                    <a href="#product" class="productname">
                        The Avett Brothers<br/>
                        Bowen Hoodie
                    </a>
                </h2>
                <div class="price">
                    <a href="#product">
                        <h2>60.00€</h2>
                    </a>                                
                </div>
                <div class="buybutton">
                    <button class="button">Buy</button>
                </div>
            </div>
        </li>
    </ul>
</div>

<div id="page2" class="tabcontent">
    <ul>
        <li class="item">
            <a href="#product"><img src="loja/roupa/topproducts/avt486_a.jpg"></a>
            <div class="productinfo">
                <h2>
                    <a href="#product" class="productname">
                        The Avett Brothers<br/>
                        Bowen Hoodie
                    </a>
                </h2>
                <div class="price">
                    <a href="#product">
                        <h2>60.00€</h2>
                    </a>                                
                </div>
                <div class="buybutton">
                    <button class="button">Buy</button>
                </div>
            </div>
        </li>
        <li class="item">
            <a href="#product"><img src="loja/roupa/topproducts/avt504.jpg"></a>
            <div class="productinfo">
                <h2>
                    <a href="#product" class="productname">
                        The Avett Brothers<br/>
                        Bowen Hoodie
                    </a>
                </h2>
                <div class="price">
                    <a href="#product">
                        <h2>60.00€</h2>
                    </a>                                
                </div>
                <div class="buybutton">
                    <button class="button">Buy</button>
                </div>
            </div>
        </li>
    </ul>
</div>

<div class="tab">
    <h1>
        <button class="tabbutton" onclick="openPage(event, 'page1')" id="defaultOpen">1</button> |
        <button class="tabbutton" onclick="openPage(event, 'page2')">2</button>
    </h1>
</div>
</div>

CSS：

.tab {
border: solid red;
width: 95%;
}

.tab h1 {
margin: 0 auto;
display: block;
border: solid black;
padding-left: 48%;
font-size: 30px;
}

.tab button {
border: none;
background-color: white;
font-size: 30px;
cursor: pointer;
}

.tab button:hover {
background-color: black;
color: white;
transition-duration: 0.3s;
}

.tab button.active {
background-color: black;
color: white;

}

.tabcontent {
display: none;
}

Js：

function openPage(evt, pageNum) {
  var i, tabbutton, tabcontent;
  tabcontent = document.getElementByClassName("tabcontent");
  tabbutton = document.getElementByClassName("tabbutton");

  for (i = 0; i<tabcontent.length; i++) {
    tabcontent[i].style.display = "none";
  }
  for (i = 0; i<tabbutton.length; i++) {
    tabbutton[i].className = tabbutton[i].className.replace(" active", "");
  }
  document.getElementById(pageNum).style.display="block";
  evt.currentTarget.className += " active";
}

document.getElementById("defaultOpen").click();

最后，當我單擊按鈕時，它將不起作用，應該顯示的div將不會顯示。

Answer 1

不是getElementByClassName，而是帶有getElementsByClassName的數組。

Answer 2

嘗試使用下面的代碼，您將可以運行代碼。 “ getElementByClassName”中有一個錯字

 function openPage(evt, pageNum) { var i, tabbutton, tabcontent; tabcontent = document.getElementsByClassName("tabcontent"); tabbutton = document.getElementsByClassName("tabbutton"); for (i = 0; i < tabcontent.length; i++) { tabcontent[i].style.display = "none"; } for (i = 0; i < tabbutton.length; i++) { tabbutton[i].className = tabbutton[i].className.replace(" active", ""); } document.getElementById(pageNum).style.display = "block"; evt.currentTarget.className += " active"; } document.getElementById("defaultOpen").click(); 

 .tab { border: solid red; width: 95%; } .tab h1 { margin: 0 auto; display: block; border: solid black; padding-left: 48%; font-size: 30px; } .tab button { border: none; background-color: white; font-size: 30px; cursor: pointer; } .tab button:hover { background-color: black; color: white; transition-duration: 0.3s; } .tab button.active { background-color: black; color: white; } .tabcontent { display: none; } 

 <body> <div class="options"> <div id="page1" class="tabcontent"> <ul> <li class="item"> <a href="#product"><img src="loja/roupa/topproducts/avt486_a.jpg"></a> <div class="productinfo"> <h2> <a href="#product" class="productname"> The Avett Brothers<br/> Bowen Hoodie </a> </h2> <div class="price"> <a href="#product"> <h2>60.00€</h2> </a> </div> <div class="buybutton"> <button class="button">Buy</button> </div> </div> </li> <li class="item"> <a href="#product"><img src="loja/roupa/topproducts/avt504.jpg"></a> <div class="productinfo"> <h2> <a href="#product" class="productname"> The Avett Brothers<br/> Bowen Hoodie </a> </h2> <div class="price"> <a href="#product"> <h2>60.00€</h2> </a> </div> <div class="buybutton"> <button class="button">Buy</button> </div> </div> </li> </ul> </div> <div id="page2" class="tabcontent"> <ul> Tab 2 Content <li class="item"> <a href="#product"><img src="loja/roupa/topproducts/avt486_a.jpg"></a> <div class="productinfo"> <h2> <a href="#product" class="productname"> The Avett Brothers<br/> Bowen Hoodie </a> </h2> <div class="price"> <a href="#product"> <h2>60.00€</h2> </a> </div> <div class="buybutton"> <button class="button">Buy</button> </div> </div> </li> <li class="item"> <a href="#product"><img src="loja/roupa/topproducts/avt504.jpg"></a> <div class="productinfo"> <h2> <a href="#product" class="productname"> The Avett Brothers<br/> Bowen Hoodie </a> </h2> <div class="price"> <a href="#product"> <h2>60.00€</h2> </a> </div> <div class="buybutton"> <button class="button">Buy</button> </div> </div> </li> </ul> </div> <div class="tab"> <h1> <button class="tabbutton" onclick="openPage(event, 'page1')" id="defaultOpen">1</button> | <button class="tabbutton" onclick="openPage(event, 'page2')">2</button> </h1> </div> </div> </body> 

Answer 3

將getElementByClassName替換為getElementsByClassName ...

 function openPage(evt, pageNum) { var i, tabbutton, tabcontent; tabcontent = document.getElementsByClassName("tabcontent"); tabbutton = document.getElementsByClassName("tabbutton"); for (i = 0; i<tabcontent.length; i++) { tabcontent[i].style.display = "none"; } for (i = 0; i<tabbutton.length; i++) { tabbutton[i].className = tabbutton[i].className.replace(" active", ""); } document.getElementById(pageNum).style.display="block"; evt.currentTarget.className += " active"; } document.getElementById("defaultOpen").click(); 

 .tab { border: solid red; width: 95%; } .tab h1 { margin: 0 auto; display: block; border: solid black; padding-left: 48%; font-size: 30px; } .tab button { border: none; background-color: white; font-size: 30px; cursor: pointer; } .tab button:hover { background-color: black; color: white; transition-duration: 0.3s; } .tab button.active { background-color: black; color: white; } .tabcontent { display: none; } 

 <div class="options"> <div id="page1" class="tabcontent"> <ul> <li class="item"> <a href="#product"><img src="loja/roupa/topproducts/avt486_a.jpg"></a> <div class="productinfo"> <h2> <a href="#product" class="productname"> The Avett Brothers<br/> Bowen Hoodie </a> </h2> <div class="price"> <a href="#product"> <h2>60.00€</h2> </a> </div> <div class="buybutton"> <button class="button">Buy</button> </div> </div> </li> <li class="item"> <a href="#product"><img src="loja/roupa/topproducts/avt504.jpg"></a> <div class="productinfo"> <h2> <a href="#product" class="productname"> The Avett Brothers<br/> Bowen Hoodie </a> </h2> <div class="price"> <a href="#product"> <h2>60.00€</h2> </a> </div> <div class="buybutton"> <button class="button">Buy</button> </div> </div> </li> </ul> </div> <div id="page2" class="tabcontent"> <ul> <li class="item"> <a href="#product"><img src="loja/roupa/topproducts/avt486_a.jpg"></a> <div class="productinfo"> <h2> <a href="#product" class="productname"> The Avett Brothers<br/> Bowen Hoodie </a> </h2> <div class="price"> <a href="#product"> <h2>60.00€</h2> </a> </div> <div class="buybutton"> <button class="button">Buy</button> </div> </div> </li> <li class="item"> <a href="#product"><img src="loja/roupa/topproducts/avt504.jpg"></a> <div class="productinfo"> <h2> <a href="#product" class="productname"> The Avett Brothers<br/> Bowen Hoodie </a> </h2> <div class="price"> <a href="#product"> <h2>60.00€</h2> </a> </div> <div class="buybutton"> <button class="button">Buy</button> </div> </div> </li> </ul> </div> <div class="tab"> <h1> <button class="tabbutton" onclick="openPage(event, 'page1')" id="defaultOpen">1</button> | <button class="tabbutton" onclick="openPage(event, 'page2')">2</button> </h1> </div> </div> 

Answer 4

您只需在第3,4行中將getElementsByClassName替換為getElementByClassName ，在此處找到代碼即可正常工作，我建議使用bootstrap可以幫助您，並使您的生活更輕松，

Answer 5

我必須在這里為您寫下答案，您必須在代碼中進行一些小的更改。 如果你婉知道錯誤是錯誤是“getElementByClassName”以S的元素getElementsByClassName方法

 function openPage(evt, pageNum) { var i, tabbutton, tabcontent; tabcontent = document.getElementsByClassName("tabcontent"); tabbutton = document.getElementsByClassName("tabbutton"); for (i = 0; i<tabcontent.length; i++) { tabcontent[i].style.display = "none"; } for (i = 0; i<tabbutton.length; i++) { tabbutton[i].className = tabbutton[i].className.replace(" active", ""); } document.getElementById(pageNum).style.display="block"; evt.currentTarget.className += " active"; } document.getElementById("defaultOpen").click(); 

 .tab h1 { margin: 0 auto; display: block; border: solid black; padding-left: 48%; font-size: 30px; } .tab button { border: none; background-color: white; font-size: 30px; cursor: pointer; } .tab button:hover { background-color: black; color: white; transition-duration: 0.3s; } .tab button.active { background-color: black; color: white; } .tab { border: solid red; width: 95%; } .tabcontent { display: none; } 

 <div class="options"> <div id="page1" class="tabcontent"> <ul> <li class="item"> <a href="#product"><img src="loja/roupa/topproducts/avt486_a.jpg"></a> <div class="productinfo"> <h2> <a href="#product" class="productname"> The Avett Brothers<br/> Bowen Hoodie </a> </h2> <div class="price"> <a href="#product"> <h2>60.00€</h2> </a> </div> <div class="buybutton"> <button class="button">Buy</button> </div> </div> </li> <li class="item"> <a href="#product"><img src="loja/roupa/topproducts/avt504.jpg"></a> <div class="productinfo"> <h2> <a href="#product" class="productname"> The Avett Brothers<br/> Bowen Hoodie </a> </h2> <div class="price"> <a href="#product"> <h2>60.00€</h2> </a> </div> <div class="buybutton"> <button class="button">Buy</button> </div> </div> </li> </ul> </div> <div id="page2" class="tabcontent"> <ul> <li class="item"> <a href="#product"><img src="loja/roupa/topproducts/avt486_a.jpg"></a> <div class="productinfo"> <h2> <a href="#product" class="productname"> The Avett Brothers<br/> Bowen Hoodie </a> </h2> <div class="price"> <a href="#product"> <h2>60.00€</h2> </a> </div> <div class="buybutton"> <button class="button">Buy</button> </div> </div> </li> <li class="item"> <a href="#product"><img src="loja/roupa/topproducts/avt504.jpg"></a> <div class="productinfo"> <h2> <a href="#product" class="productname"> The Avett Brothers<br/> Bowen Hoodie </a> </h2> <div class="price"> <a href="#product"> <h2>60.00€</h2> </a> </div> <div class="buybutton"> <button class="button">Buy</button> </div> </div> </li> </ul> </div> <div class="tab"> <h1> <button class="tabbutton" onclick="openPage(event, 'page1')" id="defaultOpen">1</button> | <button class="tabbutton" onclick="openPage(event, 'page2')">2</button> </h1> </div> </div>