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.
不是getElementByClassName,而是带有getElementsByClassName的数组。
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>
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>
您只需在第3,4行中将getElementsByClassName
替换为getElementByClassName
,在此处找到代码即可正常工作,我建议使用bootstrap可以帮助您,并使您的生活更轻松,
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>
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.