Javascript.RU

Создать новую тему Ответ
 
Опции темы Искать в теме
  #1 (permalink)  
Старый 04.01.2021, 20:35
Профессор
Отправить личное сообщение для Vaska Посмотреть профиль Найти все сообщения от Vaska
 
Регистрация: 08.05.2017
Сообщений: 178

Переход на нужную вкладку таба по href
Приветствую!

На странице есть блок с вкладками. Нужно на этой же странице разместить ссылку, за пределами блока с табами, выше блока с табами, и по клику по этой ссылке, переходить во второй таб.
Можете помочь дописать скртипт, чтобы ссылка работала?
Заранее спасибо откликнувшимся.

Ссылка выше блока с табами:
<a href="#dsGoods2">Ссылка на таб2</a>


Блок с табами:
<div>
		<div>
			<div>
				<ul>
					<li class="current"><a id="tab1" href="#tab1">таб1</a></li>
					<li><a id="tab2" href="#tab2">таб2</a></li>
					<li><a id="tab3" href="#tab3">таб3</a></li>					
				</ul>
			</div>
		</div>
		<div>
			<div class="content bd" id="dsGoods1">
				<div class="dss-goods-info-content">
				Содержание вкладки 1
				</div>
			</div>
		</div>
		<div>
			<div class="dss-goods-title-bar hd" style="display: none">
				<h4><a href="javascript:void(0);">таб2</a></h4>
			</div>
			<div class="dss-goods-info-content bd" id="dsGoods2" style="display: none">
				Содержание вкладки 2
			</div>
		</div>
		<div>
			<div class="dss-goods-title-bar hd" style="display: none">
				<h4><a href="javascript:void(0);">таб3</a></h4>
			</div>
			<div class="dss-goods-info-content bd" id="dsGoods3" style="display: none">
				Содержание вкладки 3
			</div>
		</div>
	</div>


// таб1 - показывает по умолчанию
	$('#tab1').click(function(){
		$('.bd').css('display','none');
		$('#dsGoods1').css('display','');
		$('.hd').css('display','none');
	});
	// Нажмите на таб2, чтобы скрыть другую вкладку и их строку заголовка.
	$('#tab2').click(function(){
		$('.bd').css('display','none');
		$('#dsGoods2').css('display','');
		$('.hd').css('display','none');
	});
	// Нажмите на таб3, чтобы скрыть другую вкладку и их строку заголовка.
	$('#tab3').click(function(){
		$('.bd').css('display','none');
		$('#dsGoods3').css('display','');
		$('.hd').css('display','none');
	});
Ответить с цитированием
  #2 (permalink)  
Старый 04.01.2021, 22:57
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 33,068

Сообщение от Vaska
чтобы ссылка работала?
$('#tab2, [href="#dsGoods2"]').click...
Ответить с цитированием
  #3 (permalink)  
Старый 05.01.2021, 06:27
Профессор
Отправить личное сообщение для Vaska Посмотреть профиль Найти все сообщения от Vaska
 
Регистрация: 08.05.2017
Сообщений: 178

Сообщение от рони Посмотреть сообщение
$('#tab2, [href="#dsGoods2"]').click...
Так и подумал, что рони ответит . Уже второй раз помогает.
Ссылка работает, по клику перемещает к вкладке #dsGoods2 и открывает содержимое вкладки #dsGoods2.
Однако не переключает на заголовок таба #tab2, а остается в заголовке #tab1.
Можете с этим помочь?
Ответить с цитированием
  #4 (permalink)  
Старый 05.01.2021, 07:41
Профессор
Отправить личное сообщение для laimas Посмотреть профиль Найти все сообщения от laimas
 
Регистрация: 14.01.2015
Сообщений: 12,990

Сообщение от Vaska
Однако не переключает на заголовок таба #tab2
НУ так верстка та еще, все как в басне о щуке, раке, ... Определитесь с контейнерами, которые, и только они, будут скрываться, а уже в них помещайте все что хочется, и которым управлять не надо.

<style>
li {
    list-style: none;
    display: inline-block;
}

.tab-content:not(#tab1) {
    display: none;
} 
</style>

<div>

    <div>
        <ul>
            <li class="current"><a href="#tab1">таб1</a></li>
            <li><a href="#tab2">таб2</a></li>
            <li><a href="#tab3">таб3</a></li>                
        </ul>
    </div>

    <div class="tab-content" id="tab1">
        <h4>таб1</h4>
        Содержание вкладки 1
    </div>

    <div class="tab-content" id="tab2">
        <h4>таб2</h4>
        Содержание вкладки 2
    </div>

    <div class="tab-content" id="tab3">
        <h4>таб3</h4>
        Содержание вкладки 3
    </div>

</div>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
<script>
$('ul').on('click', 'a', function(e) {
    e.preventDefault();
    var active = $(this).parent().siblings('.current').removeClass('current').children().attr('href'),
        current = $(this).parent().addClass('current').end().attr('href');
    
    $(active).hide();
    $(current).show()
});
</script>
Ответить с цитированием
  #5 (permalink)  
Старый 05.01.2021, 08:35
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 33,068

Сообщение от Vaska
Однако не переключает на заголовок таба
где код установки li class="current"?
и смотрите пример от laimas,
Ответить с цитированием
  #6 (permalink)  
Старый 05.01.2021, 12:21
Профессор
Отправить личное сообщение для Vaska Посмотреть профиль Найти все сообщения от Vaska
 
Регистрация: 08.05.2017
Сообщений: 178

В пределах вкладок ваш вариант работает, как и мой. Поставил ссылку за пределами вкладок, ваш вариант не работает как и мой. Может я чего не так делаю, но в вашем примере нет внешне расположенной ссылки, чтобы протестировать.
Ответить с цитированием
  #7 (permalink)  
Старый 05.01.2021, 12:23
Профессор
Отправить личное сообщение для Vaska Посмотреть профиль Найти все сообщения от Vaska
 
Регистрация: 08.05.2017
Сообщений: 178

Сообщение от рони Посмотреть сообщение
где код установки li class="current"?
и смотрите пример от laimas,
Да, li class="current" не переключается на заголовок второго таба, если я по внешней ссылке перешел на вторую вкладку. Код laimas что-то не работает с внешней ссылкой. Имеется ввиду, что ссылка на той же странице, что и вкладки, но ссылка за пределами блока с табами.
Ответить с цитированием
  #8 (permalink)  
Старый 05.01.2021, 15:27
Профессор
Отправить личное сообщение для laimas Посмотреть профиль Найти все сообщения от laimas
 
Регистрация: 14.01.2015
Сообщений: 12,990

Сообщение от Vaska
Код laimas что-то не работает с внешней ссылкой.
Это как понимать, если табы, это управление уже имеющимся на странице?
Ответить с цитированием
  #9 (permalink)  
Старый 05.01.2021, 22:51
Профессор
Отправить личное сообщение для Vaska Посмотреть профиль Найти все сообщения от Vaska
 
Регистрация: 08.05.2017
Сообщений: 178

Сообщение от laimas Посмотреть сообщение
Это как понимать, если табы, это управление уже имеющимся на странице?
После установки вашего кода на страницу, по ссылкам переключаются вкладки, но заголовки табов не переключаются и табы ведут себя иначе, перестают прилипать к верхней части браузера при переключении табов. Я вам в личку написал.
Ответить с цитированием
  #10 (permalink)  
Старый 05.01.2021, 23:03
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 33,068

Vaska,
$('[href="#dsGoods2"]').click(() => $('#tab2').click());
Ответить с цитированием
Ответ



Опции темы Искать в теме
Искать в теме:

Расширенный поиск


Похожие темы
Тема Автор Раздел Ответов Последнее сообщение
Возврат на нужную вкладку oopros Общие вопросы Javascript 1 24.09.2016 14:39
переход на вкладку matue89 Общие вопросы Javascript 1 06.09.2016 15:22
Срочно. Как открыть нужную вкладку? freedbrd Элементы интерфейса 1 25.01.2016 18:56
Как по ссылке перейти на нужную вкладку? ye1low Элементы интерфейса 6 24.04.2015 09:40
Переход по метке <a href = #metka> с нажатием в <ul><li> papacoca (X)HTML/CSS 2 01.10.2014 15:09