I successfully implemented small tables containing input elements and buttons, but I decided to enhance the user interface by placing them inside CSS tabs. The new layout looked better and saved space on the page.
After configuring the CSS tabs using divs, I discovered that the buttons and textboxes inside the tables were no longer functional. While they appeared normal, clicking on them did not trigger any action.
Any suggestions or solutions for this issue? For brevity, I have excluded the code for the other tables in this example. Specifically, the button named DeleteLibraryButton is the one causing problems.
This is the link to the tabbed element: https://codepen.io/rafaelavlucas/pen/MLKGba
// JavaScript logic for activating tabs goes here...<!-- CSS styles for tabs go here... --><!-- HTML structure for Library Tabs start-->
<section id="wrapper">
<div class="content">
<!-- Tab navigation buttons -->
<div class="tabs">
<button class="tablinks active" data-country="CAL" onclick="return false;"><p data-title="CAL">Create a Library</p></button>
<button class="tablinks" data-country="WEL" onclick="return false;"><p data-title="WEL">Add via WEL Code</p></button>
<button class="tablinks" data-country="LA" onclick="return false;"><p data-title="LA">Library Access</p></button>
<button class="tablinks" data-country="DAL" onclick="return false;"><p data-title="DAL">Delete a Library</p></button>
</div>
<!-- Content for "Delete a Library" tab -->
<div id="DAL" class="tabcontent">
<h3>Delete a Library</h3>
<table>
<tr>
<td style="width: 200px"> </td>
<td>
<button class="fancyDeleteButton" ID="DeleteLibraryButton" onclick="LCTDeleteButton_Click()">Delete Library ID:</button>
<select id="DropDownList1">
<option value="0" selected>Please Select</option>
</select>
</td>
</tr>
</table>
</div>
</div>
</div>
</section>