I just looked at the Tab implementation at:
http://www.aspsnippets.com/Articles/Bootstrap-Tabs-Maintain-Selected-Active-Tab-on-PostBack-in-ASPNet.aspx
Outstanding artical and functionality. However I want to use a different UI but have the exact funactionality in your artical:
1. Active tab is remembered at PostBack.
2. Default Tab is selected at load.
3. I want to have a button on the Tabs to switch to the NEXT Tab. Currently I can do that, the Tab changes but the new tab is not highted in Orange as the selected or current tab. My CSS, HTML and JScripts are included. Any help wll be greatly appreciated. Thank you in advance.
<script type="text/javascript">
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";
}
// Get the element with id="defaultOpen" and click on it
document.getElementById("defaultOpen").click();
</script>
<body>
<div style="width: 1200px">
<p>In this example, we use JavaScript to "click" on the London link, to open the tab on page load.</p>
<ul class="tab">
<li><a href="javascript:void(0)" class="tablinks" onclick="openCity(event, 'Personal')" id="defaultOpen">Personal</a></li>
<li><a href="javascript:void(0)" class="tablinks" onclick="openCity(event, 'Financial')">Financial</a></li>
<li><a href="javascript:void(0)" class="tablinks" onclick="openCity(event, 'Spouse')">Spouse/Care Giver</a></li>
<li><a href="javascript:void(0)" class="tablinks" onclick="openCity(event, 'Emergency')">Emergency Contact</a></li>
<li><a href="javascript:void(0)" class="tablinks" onclick="openCity(event, 'Sharing')">Record Sharing</a></li>
<li><a href="javascript:void(0)" class="tablinks" onclick="openCity(event, 'History')">History</a></li>
<li><a href="javascript:void(0)" class="tablinks" onclick="openCity(event, 'Medicines')">Medicines</a></li>
<li><a href="javascript:void(0)" class="tablinks" onclick="openCity(event, 'Symptoms')">Symptoms</a></li>
<li><a href="javascript:void(0)" class="tablinks" onclick="openCity(event, 'Referral')">Referral</a></li>
</ul>
<div id="Personal" class="tabcontent">
<h3>London</h3>
<p>London is the capital city of England.</p>
<br />
<br />
<br />
<input id="BtnPersonal" type="button" runat="server" value="NEXT" onclick="openCity(event, 'Financial')" />
<a href="javascript:void(0)" class="tablinks" onclick="openCity(event, 'Financial')">NEXT</a>
</div>
<div id="Financial" class="tabcontent">
<h3>Paris</h3>
<p>Paris is the capital of France.</p>
</div>
<div id="Spouse" class="tabcontent">
<h3>Tokyo</h3>
<p>Tokyo is the capital of Japan.</p>
</div>
<div id="Emergency" class="tabcontent">
<h3>London</h3>
<p>London is the capital city of England.</p>
</div>
<div id="Sharing" class="tabcontent">
<h3>Paris</h3>
<p>Paris is the capital of France.</p>
</div>
<div id="History" class="tabcontent">
<h3>Tokyo</h3>
<p>Tokyo is the capital of Japan.</p>
</div>
<div id="Medicines" class="tabcontent">
<h3>Paris</h3>
<p>Paris is the capital of France.</p>
</div>
<div id="Symptoms" class="tabcontent">
<h3>Tokyo</h3>
<p>Tokyo is the capital of Japan.</p>
</div>
<div id="Referral" class="tabcontent">
<h3>Tokyo</h3>
<p>Tokyo is the capital of Japan.</p>
</div>
</div>
</body>
<style type="text/css">
body {
font-family: "Lato", sans-serif;
}
ul.tab {
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;
border: 1px solid #ccc;
border-radius: 4px;
background-color: cornflowerblue; /*#f1f1f1;*/
}
/* Float the list items side by side */
ul.tab li {
float: left;
}
/* Style the links inside the list items */
ul.tab li a {
display: inline-block;
color: black;
text-align: center;
padding: 14px 16px;
text-decoration: none;
transition: 0.3s;
font-size: 17px;
}
/* Change background color of links on hover */
ul.tab li a:hover {
background-color: orange; /*#ddd;*/
}
/* Create an active/current tablink class */
ul.tab li a:focus, .active {
background-color: darkorange; /*#ccc;*/
}
/* Style the tab content */
.tabcontent {
display: none;
padding: 6px 12px;
border: 1px solid #ccc;
border-top: none;
}
</style>