bootstrap 的 tab 開啟特定分頁

由於圖層們在切來切去時, 會保留上一次使用者存取的狀態, 或是由於使用者還沒使用過 tab, 希望tab 在指定的分頁被開啟.

如果是用button 來切換 tab:

<button aria-label="Filter" aria-selected="true" class="ifilter_chart_left_nav_btn active" data-bs-toggle="tab" data-sidebar-tab="true" href="#ifilter_tab_bar_filter" role="tab" tabindex="0">
Filter
</button>

可以服用下列的程式來觸發：

function switch_ifilter_tab_to(css_query_string){
  const triggerEl = document.querySelector(css_query_string);
  if(triggerEl!=null) {
    const tabTrigger = new bootstrap.Tab(triggerEl)
    tabTrigger.show();
  }
}
switch_ifilter_tab_to("button[href='#ifilter_tab_bar_filter']");

---

使用方法:

const css_query_string = '#your_tab_main_id a[href="#your_tab_href"]';
const triggerEl = document.querySelector(css_query_string);
if(triggerEl!=null) {
	const tabTrigger = new bootstrap.Tab(triggerEl)
	tabTrigger.show();
	//bootstrap.Tab.getInstance(triggerEl).show();
}

說明：

• your_tab_main_id 是放 tab button id,
• your_tab_href 是放 tab div id

tab 的 navigation bar Example Html:

<ul class="nav nav-tabs" id="reportTab" role="tablist">
    <li class="nav-item" role="presentation">
        <a class="nav-link active" data-bs-toggle="tab" role="tab" href="#report_tab_processing" onclick="open_report_processing();"><i class="flaticon-381-stopclock me-2"></i> Processing <span id="report-outbox-tab-badge" class="badge badge-circle badge-primary"></span></a>
    </li>
    <li class="nav-item" role="presentation">
        <a class="nav-link" data-bs-toggle="tab" role="tab" href="#report_tab_completed" onclick="open_report_completed();"><i class="flaticon-381-success me-2"></i> Completed <span id="report-inbox-tab-badge" class="badge badge-circle badge-primary"></span></a>
    </li>
    <li class="nav-item" role="presentation">
        <a class="nav-link" data-bs-toggle="tab" role="tab" href="#report_tab_failed" onclick="open_report_failed();"><i class="flaticon-381-warning-1 me-2"></i> Failed <span id="report-inbox-tab-badge" class="badge badge-circle badge-primary"></span></a>
    </li>
</ul>

參考上面黑體字部份, 只要這2個就可以完成 Triger.

Example Js:

const css_query_string = '#reportTab a[href="#report_tab_'+ report_type +'"]';
const triggerEl = document.querySelector(css_query_string);
if(triggerEl!=null) {
	const tabTrigger = new bootstrap.Tab(triggerEl)
	tabTrigger.show();
}

官方說明文件:
https://getbootstrap.com/docs/5.3/components/navs-tabs/