我尝试使用Js和CSS创建Tab，但它们无法正常工作

Question

I have a college project that intends that I create a website only using HTML, CSS and Js. I'm trying to create a store and I wish to divide the products using tabs (just like pages) but for now I wasn't able to accomplish that, clicking on the buttons won't do anything.

I tried following the guide from w3schools.com but to no avail.

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();

In the end it won't work when I click the buttons, the divs that were supposed to appear won't be displayed.

Answer 1

不是getElementByClassName，而是带有getElementsByClassName的数组。

Answer 2

TRy using the below code, you will be able to run the code. There is a typo in "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

Replace getElementByClassName to 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

You have to change a small changes in your code i have written down the answer here for you. IF you wan to know what the error was the error was ' getElementByClassName ' its s in Element 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>