Переключение jQuery Tabs по ссылке

2015-05-24
5.0 / 5 (4 vote)

Многие, кто сталкивался с необходимостью использовать в своем проекте табы, конечно же работали с самым популярным плагином jQuery Tabs. Все вроде в них хорошо, есть примеры, api, но нигде нет как же переключать эти табы с помощью обычной ссылки

Просмотрев кучу сайтов так и не нашел, как же это сделать, поэтому написал свой хак.

html 

<a href="#tabs-2" class="openTab">Открытие таба по ссылке</a>

<div id="tabs">
	<ul>
		<li><a href="#tabs-1">таб 1</a></li>
		<li><a href="#tabs-2">таб 2</a></li>
	</ul>
	<div id="tabs-1">
		Текст таба №1 jQuery Tabs по ссылке
	</div>
	<div id="tabs-2">
		Текст таба №2 jQuery Tabs по ссылке
	</div>
</div>

 js код

var jQ = jQuery.noConflict();
//Инициализация табов
jQ("#tabs").tabs();
//Получаем индекс таба (int)
jQ.fn.tabIndex = function () {
	return jQ(this).parent().find(this).index() - 1;
};
//Переключаем на нужный нам таб по его индексу
jQ.fn.selectTabByID = function (tabID) {
	jQ(this).tabs("option", "active", jQ('#' + tabID).tabIndex());
};
//Действие по нажатию на ссылку
jQ("a.openTab").click(function() {
	thisName = jQ(this).attr("href").split("#")[1];
	jQ("#tabs").selectTabByID(thisName);
});

 Вот и все, теперь на нажатию на ссылку, будет открываться таб №2

Пример на jsfiddle http://jsfiddle.net/w1k7w0ff/

Read 3154 times Last modified on 2019-07-21

Leave a comment

Make sure you enter the (*) required information where indicated. HTML code is not allowed.