I have this HTML page
<html>
<head>
<title>Excel Viewer</title>
<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-+0n0xVW2eSR5OomGNYDnhzAbDsOXxcvSN1TPprVMTNDbiYZCxYbOOl7+AMvyTG2x" crossorigin="anonymous">
<link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/1.10.25/css/dataTables.bootstrap5.css">
</head>
<body>
<div class="container">
<br>
<ul class="nav nav-tabs" id="fileTab" role="tablist">
<li class="nav-item" role="presentation">
<button class="nav-link active" id="excel-tab1" data-bs-toggle="tab" data-bs-target="#excel1" type="button" role="tab" aria-controls="excel1" aria-selected="true">9. Defined Data Objects.xlsx</button>
</li>
<li class="nav-item" role="presentation">
<button class="nav-link" id="excel-tab2" data-bs-toggle="tab" data-bs-target="#excel2" type="button" role="tab" aria-controls="excel2" aria-selected="false">9. Defined Data Objects_2.xlsx</button>
</li>
</ul>
<div class="tab-content" id="tabContent">
<div class="tab-pane fade show active" id="excel1" role="tabpanel" aria-labelledby="excel1">
<br>
<table border="1" class="dataframe table table-striped table-bordered table-hover" id="data1">
<thead>
<tr style="text-align: right;">
<th>Name</th>
<th>Data Attribute</th>
<th>Default Expression</th>
<th>Override Expression</th>
</tr>
</thead>
<tbody>
<tr>
<td>ACCT_AMT_AVLBL_AFTR_PRCG_NMRC</td>
<td>decimal128(18, 0)</td>
<td>pydecimal(left_digits=18,right_digits=0)</td>
<td></td>
</tr>
</tbody>
</table>
<br>
</div>
<div class="tab-pane fade" id="excel2" role="tabpanel" aria-labelledby="excel2">
<br>
<table border="1" class="dataframe table table-striped table-bordered table-hover" id="data2">
<thead>
<tr style="text-align: right;">
<th>Name</th>
<th>Data Attribute</th>
<th>Default Expression</th>
<th>Override Expression</th>
</tr>
</thead>
<tbody>
<tr>
<td>ACCT_AMT_AVLBL_AFTR_PRCG_NMRC</td>
<td>decimal128(18, 0)</td>
<td>pydecimal(left_digits=18,right_digits=0)</td>
<td></td>
</tr>
</tbody>
</table>
<br>
</div>
</div>
<br>
</div>
<script type="text/javascript" charset="utf8" src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script type="text/javascript" charset="utf8" src="https://cdn.datatables.net/1.10.25/js/jquery.dataTables.js"></script>
<script type="text/javascript" charset="utf8" src="https://cdn.datatables.net/1.10.25/js/dataTables.bootstrap5.js"></script>
<script>
$(document).ready(function () {
for (let i = 1; i <= 2; i++) {
$(`#data` + i).DataTable();
}
});
</script>
</body>
</html>And I was trying to enable tabs via JavaScript like here
https://getbootstrap.com/docs/5.0/components/navs-tabs/#javascript-behavior
but it did not work.
What do I miss?