Active tab bootstrap sử dụng liên kết neo trong HTML

Thứ ba - 04/08/2015 23:28
Bootstrap cung cấp nhiều phương án để active tab bằng javascript. Dùng tham số neo từ URL là một phương án, khi vì một lý do nào đó, các cách khác không thể áp dụng.
Trong bootstrap (hoặc một đối tượng nào đó bạn muốn áp dụng một thuộc tính cho nó) bạn có thể truyền tham số từ URL (theo cách thường dùng) để active (chọn) một tab bất kỳ. Nhưng trong trường hợp không thể truyền tham số thì bạn có thể dùng liên kết neo HTML để thực hiện điều này.

Bài viết này, mình sử dụng Javascript kiểm tra và lấy giá trị liên kết neo (anchor) từ URL để áp dụng vào thực tế sử dụng tab của framework bootstrap.

<div>
	<!-- Nav tabs -->
	<ul class="nav nav-tabs" role="tablist">
		<li role="presentation" class="active">
			<a href="#home" aria-controls="home" role="tab" data-toggle="tab">Home</a>
		</li>
		<li role="presentation">
			<a href="#profile" aria-controls="profile" role="tab" data-toggle="tab">Profile</a>
		</li>
		<li role="presentation">
			<a href="#messages" aria-controls="messages" role="tab" data-toggle="tab">Messages</a>
		</li>
		<li role="presentation">
			<a href="#settings" aria-controls="settings" role="tab" data-toggle="tab">Settings</a>
		</li>
	</ul>
	<!-- Tab panes -->
	<div class="tab-content">
		<div role="tabpanel" class="tab-pane active" id="home">
			...
		</div>
		<div role="tabpanel" class="tab-pane" id="profile">
			...
		</div>
		<div role="tabpanel" class="tab-pane" id="messages">
			...
		</div>
		<div role="tabpanel" class="tab-pane" id="settings">
			...
		</div>
	</div>
</div>

Các phương án active tab bootstrap cung cấp:

$('#myTabs a[href="#profile"]').tab('show') // Select tab by name
$('#myTabs a:first').tab('show') // Select first tab
$('#myTabs a:last').tab('show') // Select last tab
$('#myTabs li:eq(2) a').tab('show') // Select third tab (0-indexed)

Ví dụ: Dưới đây mình dùng cách một, “Select tab by name”. Mình muốn active tab profile, thì URL sẽ là: http:/mynukeviet.net/abc.html#profile. Giá trị profile ở đây lấy tại href="#profile".

Xử lý javascript để bắt giá trị neo, sau đó active tab tương ứng.

if(window.location.hash) {	var hash = window.location.hash.substring(1);	$('.nav-tabs a[href="#' + hash + '"]').tab('show');}

Demo:
http://developers.mynukeviet.net/code/Tao-tab-noi-dung-su-dung-CSS-va-Jquery-10/#tab_code_html
http://developers.mynukeviet.net/code/Tao-tab-noi-dung-su-dung-CSS-va-Jquery-10/#tab_code_css

Tổng số điểm của bài viết là: 12 trong 3 đánh giá

Xếp hạng: 4 - 3 phiếu bầu
Click để đánh giá bài viết

  Ý kiến bạn đọc

Trung tâm ứng dụng NukeViet
Ghi rõ nguồn khi sao chép thông tin từ website này.

Powered by NukeViet - a product of VINADES.,JSC