I currently have a navigation bar with only two items. While I may potentially add more items in the future, for now I am content with just these two. Upon opening the page, my goal is to display the content of the first item in the navigation bar. Each item corresponds to a separate table, and on load, the first table should be visible on the page. When a user clicks on a different link, I want the corresponding table to be displayed. I am uncertain about the best approach or solution to tackle this issue. Below is the HTML code I am working with:
<div class="container">
<section class="mainBox">
<h3>Home Page</h3>
<nav class="xNavigation">
<a href="#" id="tab1" onClick="openTab('tab1')">Info 1</a> |
<a href="#" id="tab2" onClick="openTab('tab2')">Info 2</a> |
</nav>
<div id="dataContainer">
//Here I want to load the tables
</div>
</section>
</div>
I have already created tables on the page as follows:
<table class="tab1Class" id="tab1Tbl">
<caption>Info 1</caption>
<tr>
<th>Last Name</th>
<th>First Name</th>
<th>DOB</th>
</tr>
<tr>
<td><input type="text" name="lname" id="lname" value="" size="20" maxlength="30" readonly /></td>
<td><input type="text" name="fname" id="fname" value="" size="20" maxlength="30" readonly /></td>
<td><input type="text" name="dob" id="dob" value="" size="10" maxlength="10" readonly /></td>
</tr>
</table>
<table class="tab2Class" id="tab2Tbl">
<caption>Info 2</caption>
<tr>
<th>Last Name</th>
<th>First Name</th>
<th>DOB</th>
</tr>
<tr>
<td><input type="text" name="lname2" id="lname2" value="" size="20" maxlength="30" readonly /></td>
<td><input type="text" name="fname2" id="fname2" value="" size="20" maxlength="30" readonly /></td>
<td><input type="text" name="dob2" id="dob2" value="" size="10" maxlength="10" readonly /></td>
</tr>
</table>
My aim is to load the first table upon page load, and then switch to the second table based on the user's selection. I am unsure whether the table should be removed from the container or simply hidden.
Below is an approach I attempted, but it did not yield the desired results:
function openTab(tblID){
$('.xNavigation a').each(function(i){
if(this.id == tblID){
$('#'+tblID).show();
}else{
$(this.id).hide();
}
});
}
If anyone has insights on how to solve this problem, please share your knowledge.