I have set up a tabbed layout on one of the pages of my website with different content in each tab. The tabs are clickable and change the displayed content. However, I am experiencing an issue where the initial tab's content is not showing up after switching to another tab and back again. Could this be due to the absence of a server or is there an error in my code? Additionally, when I add content to the other tab divs, none of them show up upon refreshing the page and clicking on the respective tabs. Only the content of the first tab is visible. Thank you for your help.
<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.0/jquery.min.js"></script>
<link rel="stylesheet" type="text/css" href="./common/res.css"/>
<meta charset="utf-8">
<title>Room Reservation</title>
</head>
<header>
<script type="text/javascript" src="./common/tab.js"></script>
</header>
<body>
<div class="tabs">
<ul class="tab-links">
<li class="active"><a href="#tab1">Stage</a></li>
<li><a href="#tab2">Studio</a></li>
<li><a href="#tab3">Session</a></li>
</ul>
<div class="tab-content">
<div id="tab1" class="tab active">
<form required>
Room Selection:<br>
<select name="room">
<option value="stage">Stage Access</option>
<option value="grip">Grip Closet</option>
<option value="grid">Grid</option>
</select> <br><br>
</form>
<p style="color:red;">In order to gain access to the stage you must pick up the access key from the Rental House.</p><br>
<textarea readonly id="policy" rows="8" cols="30" placeholder="Policy Summary will go here"></textarea><br><br>
<input required type="radio" id="agree">I agree I have read and understand the policy stated above and have read the full liability form.<br><br>
<div id="cal">
<iframe src="https://calendar.google.com/calendar/embed?showPrint=0&showTabs=0&mode=WEEK&height=600&wkst=1&bgcolor=%23FFFFFF&ctz=America%2FNew_York" width="800" height="600" frameborder="0"></iframe>
</div><br>
<form target="_blank" action="https://mediaservices.champlain.edu/webcheckout/pir/login">
<input type="submit" value="Confirm">
</form>
</div>
<div id="tab2" class="tab">
<form required>
Room Selection:<br>
<select name="studioroom">
<option value="control">Control Room A</option>
<option value="isob">Isolation Room B</option>
<option value="isoc">Isolation Room C</option>
</select> <br><br>
</form>
</div>
<div id="tab3" class="tab">
</div>
</div>
</div>
<script>
jQuery(document).ready(function() {
jQuery('.tabs .tab-links li').on('click', function(e) {
tabs(jQuery(this).attr('data-toggle'));
jQuery(this).addClass('active').siblings().removeClass('active');
});
function tabs(tab) {
jQuery('.tab-content .tab').hide()
jQuery('.tab-content').find(tab).show();
}
});
</script>
</body>
</html>
/*----- Tabs -----*/
.tabs {
width:100%;
display:inline-block;
}
/*----- Tab Links -----*/
/* Clearfix */
.tab-links:after {
display:block;
clear:both;
content:'';
}
.tab-links li {
margin:0px 5px;
float:left;
list-style:none;
}
.tab-links a {
padding:9px 15px;
display:inline-block;
border-radius:3px 3px 0px 0px;
background:#7FB5DA;
font-size:16px;
font-weight:600;
color:#4c4c4c;
transition:all linear 0.15s;
}
.tab-links a:hover {
background:#a7cce5;
text-decoration:none;
}
li.active a, li.active a:hover {
background:#fff;
color:#4c4c4c;
}
/*----- Content of Tabs -----*/
.tab-content {
padding:15px;
border-radius:3px;
box-shadow:-1px 1px 1px rgba(0,0,0,0.15);
background:#fff;
}
.tab {
display:none;
}
.tab.active {
display:block;
}