Гость
Войти | Профиль | Очистить
Целевая тема:
Создать новую тему:
Автор:
Действия ...
Форумы / HTML, JavaScript, VBScript, CSS [игнор отключен] [закрыт для гостей] / Подскажите по вкладкам в Bootstrap / 3 сообщений из 3, страница 1 из 1
15.01.2018, 21:27
    #39584715
Alibek B
Alibek B
Участник
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
Подскажите по вкладкам в Bootstrap
Есть такая верстка: https://jsfiddle.net/u8f92807/1/
Несколько вкладок с текстом.
Я хочу разместить в тексте ссылки, которые бы переключали вкладки (в данном примере такая ссылка есть на вкладке Tab 3).
При клике на этой ссылке содержимое меняется, но непосредственно закладки не меняются (то есть выбранная вкладка не меняется).
Я что-то не так делаю? Или менять выбранную вкладку нужно вручную?
...
Рейтинг: 0 / 0
| Ответить | Цитировать | Написать  
15.01.2018, 21:35
    #39584717
Alibek B
Alibek B
Участник
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
Подскажите по вкладкам в Bootstrap
Я пробовал переключать вкладки кодом: $().tab('show')
Но результат получался тот же самый — содержимое вкладки переключалось, но выбранная закладка в заголовке не менялась.
Если вручную менять класс active в role="tablist", то закладка в заголовке меняется, но скорее всего есть более прямой способ.
...
Рейтинг: 0 / 0
| Ответить | Цитировать | Написать  
15.01.2018, 23:31
    #39584738
Alibek B
Alibek B
Участник
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
Подскажите по вкладкам в Bootstrap
Сделал таким образом:
Код: javascript
1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
	$('.tab-content .tab-pane a[role="tab"]').on('click', function(event){
		var $id = $(this).attr('href');
		if (!$id) return;
		event.preventDefault();
		var $tab = $(this).closest('.tab-content').parent();
		var $lst = $tab.find('[role="tablist"]');
		var $ref = $lst.find('[role="tab"]');
		$ref = $ref.filter('[href="'+$id+'"]');
		$ref.tab('show');
	});


Соответствующие ссылки должны быть внутри .tab-pane и иметь атрибут role="tab".
Сейчас все работает.
Но если в Bootstrap есть штатный способ для такой задачи, хотелось бы использовать его.
...
Рейтинг: 0 / 0
| Ответить | Цитировать | Написать  
Форумы / HTML, JavaScript, VBScript, CSS [игнор отключен] [закрыт для гостей] / Подскажите по вкладкам в Bootstrap / 3 сообщений из 3, страница 1 из 1
Найденые пользователи ...
Разблокировать пользователей ...
Читали тему (0):
Читали форум (0):
Пользователи онлайн (0):
Польз. соглашение
созд. / загр.: 161ms
Закрыть
start [/forum/topic.php?fid=22&mobile=1&tid=1444334]:
 0ms
get settings:
 10ms
get forum list:
 12ms
check forum access:
 3ms
check topic access:
 3ms
track hit:
 58ms
get topic data:
 12ms
get forum data:
 3ms
get page messages:
 42ms
get tp. blocked users:
 2ms
others: 16ms
total:  161ms
x
x
Закрыть


Просмотр
0 / 0
Close
Debug Console [Select Text]