bootstrap 的 tab 開啟特定分頁

Posted in :

2023-09-21

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

使用方法:

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();
}

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/