"Tabs"
Bootstrap 4.0.0 Snippet by faiz181

<link href="//maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css"> <script src="//maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js"></script> <script src="//code.jquery.com/jquery-1.11.1.min.js"></script> <!------ Include the above in your HEAD tag ----------> <link rel="stylesheet" href="https://www.w3schools.com/w3css/4/w3.css"> <div class="container w3-animate-opacity"> <div class="tab"> <button class="tablinks" onclick="openCity(event, 'Servers')">Servers List</button> <button class="tablinks" onclick="openCity(event, 'Fruits')">Fruits Price</button> <button class="tablinks" onclick="openCity(event, 'Workers')">Workers List</button> </div> <div id="Servers" class="tabcontent"> <table class="w3-animate-opacity"> <tr> <th>Servers List</th> <th>Status</th> <th>Time</th> </tr> <tr> <td>Ubuntu Server 16.04.4</td> <td class="actived"><a href="#">Available</a></td> <td>1 year, 11 months, 23 hours, 59minutes, 59seconds</td> </tr> <tr> <td>Virtual Machine Windows Server 2002</td> <td class="actived"><a href="#">Available</a></td> <td>2 year, 11 months, 23 hours, 59minutes, 59seconds</td> </tr> <tr> <td>Windows 10 Spark server</td> <td class="deactivated"><a href="#">Unavailable</a></td> <td>0 year, 6 months, 2 hours, 9minutes, 40seconds</td> </tr> <tr> <td>Windows XP Professional</td> <td class="deactivated"><a href="#">Unavailable</a></td> <td>0 year, 0 month, 0 hours, 0 minutes, 0 seconds</td> </tr> </table> </div> <div id="Fruits" class="tabcontent w3-animate-opacity"> <table> <tr> <th>Fruits</th> <th>Ammount</th> <th>Price</th> </tr> <tr> <td>Orange</td> <td>1 unit</td> <td>U$ 0,10</td> </tr> <tr> <td>Pineapple</td> <td>1 unit</td> <td>U$ 0,20</td> </tr> <tr> <td>Strawberry</td> <td>1 unit</td> <td>U$ 0,40</td> </tr> <tr> <td>Apple</td> <td>2 units</td> <td>U$ 0,40</td> </tr> </table> </div> <div id="Workers" class="tabcontent w3-animate-opacity"> <table> <tr> <th>Officers</th> <th>Department</th> <th>Date of birth</th> <th>Status</th> </tr> <tr> <td>Leandro Bizzinotto Ferreira</td> <td>Web Designer</td> <td>23/09/1994</td> <td class="intraining">In training</td> </tr> <tr> <td>Cristiano Bizzinotto Ferreira</td> <td>Advertising</td> <td>23/09/1994</td> <td class="available">Available</td> </tr> <tr> <td>Amanda Maria Bizzinotto Ferreira</td> <td>Polyglot, Translator, Developer</td> <td>17/07/1993</td> <td class="vacation">Vacation</td> </tr> <tr> <td>Luis Antonio Ferreira</td> <td>Personal Manager</td> <td>20/08/1966</td> <td class="available">Available</td> </tr> <tr> <td>Luis Antonio Ferreira</td> <td>Personal Manager</td> <td>20/08/1968</td> <td class="available">Available</td> </tr> <tr> <td>Rita Helena Bizzinotto Ferreira</td> <td>Housewife</td> <td>20/07/1962</td> <td class="disable">Disable</td> </tr> </table> </div> </div>
.tab {overflow: hidden; border: 1px solid #ccc; background-color: #f1f1f1;} .tabcontent {display: none; padding: 6px 12px; border: 1px solid #ccc; border-top: none;} .tab button {background-color: inherit; float: left; border: none; outline: none; cursor: pointer; padding: 14px 16px; transition: 0.3s;} .tab button:hover {background-color: #ddd;} .tab .active {background-color: #ccc;} .tabcontent {display: none; padding: 6px 12px; border: 1px solid #ccc; border-top: none;} table {font-family: arial, sans-serif; border-collapse: collapse; width: 100%;} td, th {border: 1px solid #dddddd; padding: 8px; text-align: center;} /*Change color to gray*/ tr:nth-child(even) { background-color: #dddddd;} .actived a{color:green} .actived a:hover{ font-weight: bold} .deactivated a{color:red} .deactivated a:hover{ font-weight: bold} .available {color:green; } .disable{ color: red; font-weight: bold} .intraining{color: blue; font-weight: bold} .vacation{ font-weight: bold}
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";}

Related: See More


Questions / Comments: