I want to put tap function in other content too but it is not working.
when you click tap on the top, each tap display proper content.
in there i want to put more content, so i made #Hometwo, #Newstwo, #Contacttwo, #Abouttwo
so when i clicked Home tap then it show #Home and #Hometwo text.
but it only works on #Home. why is it not working on “#Hometwo”?
what should i do to make it work on “#Hometwo” either??
any help will be so appreciated. thanks!
function openPage(pageName,elmnt,color) { var i, tabcontent, tablinks; tabcontent = document.getElementsByClassName("tabcontent"); for (i = 0; i < tabcontent.length; i++) { tabcontent[i].style.display = "none"; } tablinks = document.getElementsByClassName("tablink"); document.getElementById(pageName).style.display = "block"; } // Get the element with id="defaultOpen" and click on it document.getElementById("defaultOpen").click();
* {box-sizing: border-box} /* Set height of body and the document to 100% */ body, html { height: 100%; margin: 0; font-family: Arial; } /* Style tab links */ .tablink { background-color: #555; color: white; float: left; border: none; outline: none; cursor: pointer; padding: 14px 16px; font-size: 17px; width: 25%; } .tablink:hover { background-color: #777; } /* Style the tab content (and add height:100% for full page content) */ .tabcontent { color: black; display: none; padding: 100px 20px; height: 100%; }
<button class="tablink" onclick="openPage('Home', this, 'Hometwo')">Home</button> <button class="tablink" onclick="openPage('News', this, 'Newstwo')" id="defaultOpen">News</button> <button class="tablink" onclick="openPage('Contact', this, 'Contacttwo')">Contact</button> <button class="tablink" onclick="openPage('About', this, 'Abouttwo')">About</button> <table> <tr> <td id="Home" class="tabcontent"> <div> <h3>Home</h3> <p>Home is where the heart is..</p> </div> </td> <td id="News" class="tabcontent"> <div> <h3>News</h3> <p>Home is where the heart is..</p> </div> </td> <td id="Contact" class="tabcontent"> <div> <h3>Contact</h3> <p>Home is where the heart is..</p> </div> </td> <td id="About" class="tabcontent"> <div> <h3>About</h3> <p>Home is where the heart is..</p> </div> </td> </tr> <tr> <td>this is text which always have to be displayed</td> </tr> <tr> <td id="Hometwo" class="tabcontent"> <div> <h3>Home2</h3> <p>Home is where the heart is..</p> </div> </td> <td id="Newstwo" class="tabcontent"> <div> <h3>News2</h3> <p>Home is where the heart is..</p> </div> </td> <td id="Contacttwo" class="tabcontent"> <div> <h3>Contact2</h3> <p>Home is where the heart is..</p> </div> </td> <td id="Abouttwo" class="tabcontent"> <div> <h3>About2</h3> <p>Home is where the heart is..</p> </div> </td> </tr> </table>
Advertisement
Answer
First your openPage
function accepts three params, the third being the color:
function openPage(pageName,elmnt,color) {
But you’re passing 'Hometwo'
for your third params on the clickevent. So either change that, or add a string to the display in your openPage
function.
Here’s a working sample:
function openPage(pageName,elmnt,pageName2) { var i, tabcontent, tablinks; tabcontent = document.getElementsByClassName("tabcontent"); for (i = 0; i < tabcontent.length; i++) { tabcontent[i].style.display = "none"; } tablinks = document.getElementsByClassName("tablink"); for (i = 0; i < tablinks.length; i++) { tablinks[i].style.backgroundColor = ""; } document.getElementById(pageName).style.display = "block"; elmnt.style.backgroundColor = ""; document.getElementById(pageName2).style.display = "block"; elmnt.style.backgroundColor = ""; } // Get the element with id="defaultOpen" and click on it document.getElementById("defaultOpen").click();
* {box-sizing: border-box} /* Set height of body and the document to 100% */ body, html { height: 100%; margin: 0; font-family: Arial; } /* Style tab links */ .tablink { background-color: #555; color: white; float: left; border: none; outline: none; cursor: pointer; padding: 14px 16px; font-size: 17px; width: 25%; } .tablink:hover { background-color: #777; } /* Style the tab content (and add height:100% for full page content) */ .tabcontent { color: black; display: none; padding: 100px 20px; height: 100%; }
<button class="tablink" onclick="openPage('Home', this, 'Hometwo')">Home</button> <button class="tablink" onclick="openPage('News', this, 'Newstwo')" id="defaultOpen">News</button> <button class="tablink" onclick="openPage('Contact', this, 'Contacttwo')">Contact</button> <button class="tablink" onclick="openPage('About', this, 'Abouttwo')">About</button> <table> <tr> <td id="Home" class="tabcontent"> <div> <h3>Home</h3> <p>Home is where the heart is..</p> </div> </td> <td id="News" class="tabcontent"> <div> <h3>News</h3> <p>Home is where the heart is..</p> </div> </td> <td id="Contact" class="tabcontent"> <div> <h3>Contact</h3> <p>Home is where the heart is..</p> </div> </td> <td id="About" class="tabcontent"> <div> <h3>About</h3> <p>Home is where the heart is..</p> </div> </td> </tr> <tr> <td>this is text which always have to be displayed</td> </tr> <tr> <td id="Hometwo" class="tabcontent"> <div> <h3>Home2</h3> <p>Home is where the heart is..</p> </div> </td> <td id="Newstwo" class="tabcontent"> <div> <h3>News2</h3> <p>Home is where the heart is..</p> </div> </td> <td id="Contacttwo" class="tabcontent"> <div> <h3>Contact2</h3> <p>Home is where the heart is..</p> </div> </td> <td id="Abouttwo" class="tabcontent"> <div> <h3>About2</h3> <p>Home is where the heart is..</p> </div> </td> </tr> </table>