How to keep html tab of one set open when two sets are used |
How to keep html tab of one set open when two sets are used |
Ramakrishna |
Nov 5 2019, 01:59 AM
Post
#1
|
Group: Members Posts: 2 Joined: 5-November 19 Member No.: 27,033 |
I am using html tabs (2 sets) to hide content. If I am using two sets of tabs, when a tab from second set is clicked the tab from first set is getting closed causing webpage content jump. How to make sure that the tab from first set is not closed even after clicking tab from second set. Check the following webpage for reference. https://www.campusgate.co.in/2014/03/data-i...ion-tables.html
CODE <style> body {font-family: Arial;} /* Style the tab */ .tab { overflow: hidden; border: 1px solid #ccc; background-color: #f1f1f1; } /* Style the buttons inside the tab */ .tab button { background-color: inherit; float: left; border: none; outline: none; cursor: pointer; padding: 14px 16px; transition: 0.3s; font-size: 17px; } /* Change background color of buttons on hover */ .tab button:hover { background-color: #ddd; } /* Create an active/current tablink class */ .tab button.active { background-color: #ccc; } /* Style the tab content */ .tabcontent { display: none; padding: 6px 12px; border: 1px solid #ccc; border-top: none; } </style> </head> <body> <h2>Tabs</h2> <p>Click on the buttons inside the tabbed menu:</p> <div class="tab"> <button class="tablinks" onclick="openCity(event, 'London')">London</button> <button class="tablinks" onclick="openCity(event, 'Paris')">Paris</button> <button class="tablinks" onclick="openCity(event, 'Tokyo')">Tokyo</button> </div> <div id="London" class="tabcontent"> <h3>London</h3> <p>London is the capital city of England.</p> </div> <div id="Paris" class="tabcontent"> <h3>Paris</h3> <p>Paris is the capital of France.</p> </div> <div id="Tokyo" class="tabcontent"> <h3>Tokyo</h3> <p>Tokyo is the capital of Japan.</p> </div> ------- <div class="tab"> <button class="tablinks" onclick="openCity(event, 'London1')">London1</button> <button class="tablinks" onclick="openCity(event, 'Paris1')">Paris1</button> <button class="tablinks" onclick="openCity(event, 'Tokyo1')">Tokyo1</button> </div> <div id="London1" class="tabcontent"> <h3>London</h3> <p>London is the capital city of England.</p> </div> <div id="Paris1" class="tabcontent"> <h3>Paris</h3> <p>Paris is the capital of France.</p> </div> <div id="Tokyo1" class="tabcontent"> <h3>Tokyo</h3> <p>Tokyo is the capital of Japan.</p> </div> <script> function openCity(evt, cityName) { var i, tabcontent, tablinks; tabcontent = document.getElementsByClassName("tabcontent"); for (i = 0; i < tabcontent.length; i++) { tabcontent[i].style.display = "none"; } tablinks = document.getElementsByClassName("tablinks"); for (i = 0; i < tablinks.length; i++) { tablinks[i].className = tablinks[i].className.replace(" active", ""); } document.getElementById(cityName).style.display = "block"; evt.currentTarget.className += " active"; } </script> |
CharlesEF |
Nov 6 2019, 02:18 AM
Post
#2
|
Programming Fanatic Group: Members Posts: 1,981 Joined: 27-April 13 From: Edinburg, Texas Member No.: 19,088 |
This is not a server side question. It is a client side question. If you want the first DIV to remain open then just comment out this code:
CODE for (i = 0; i < tabcontent.length; i++) { tabcontent[i].style.display = "none"; } |
pandy |
Nov 6 2019, 10:24 AM
Post
#3
|
🌟Computer says no🌟 Group: WDG Moderators Posts: 20,730 Joined: 9-August 06 Member No.: 6 |
If the thread was in the server side forum it was my fault. I was going to move it here from HTML, but in that case I must have made a mistake.
|
CharlesEF |
Nov 7 2019, 02:37 AM
Post
#4
|
Programming Fanatic Group: Members Posts: 1,981 Joined: 27-April 13 From: Edinburg, Texas Member No.: 19,088 |
I only mentioned it because I thought the OP might not know the difference. No worries.
|
Ramakrishna |
Nov 13 2019, 04:12 AM
Post
#5
|
Group: Members Posts: 2 Joined: 5-November 19 Member No.: 27,033 |
This is not a server side question. It is a client side question. If you want the first DIV to remain open then just comment out this code: CODE for (i = 0; i < tabcontent.length; i++) { tabcontent[i].style.display = "none"; } I commented out but none of the tabs are opening. |
CharlesEF |
Nov 13 2019, 03:18 PM
Post
#6
|
Programming Fanatic Group: Members Posts: 1,981 Joined: 27-April 13 From: Edinburg, Texas Member No.: 19,088 |
That code has nothing to do with opening tabs. The code only hides tabs. If your tabs don't open then you need to post the new version of your code.
|
Lo-Fi Version | Time is now: 18th April 2024 - 10:06 PM |