"Tabs"
Bootstrap 4.0.0 Snippet by LeandroBizzinotto

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
<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="//cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.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>
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
.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}
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX
1
2
3
4
5
6
7
8
9
10
11
12
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";}
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

Related: See More


Questions / Comments: