Javascript-форум (https://javascript.ru/forum/)
-   jQuery (https://javascript.ru/forum/jquery/)
-   -   Переход на нужную вкладку таба по href (https://javascript.ru/forum/jquery/81649-perekhod-na-nuzhnuyu-vkladku-taba-po-href.html)

laimas 05.01.2021 23:57

Цитата:

Сообщение от Vaska
табы ведут себя иначе, перестают прилипать к верхней части браузера при переключении табов.

Ну это не самое лучшее, когда контент скачет вверх. То что я привел, это ведь "скелет", основа того, как работает. Элементы А (а можно их и выбросить) определяют элемент, который нужно показать. Весь остальной контент помещенный в такой элемент автоматически будет показан. Как он размещен, есть ли какой либо свой функционал у них, это чисто верстка и стили. Может какой-то JS выполняющий нечто индивидуальное, но ни как не относящееся к показать/скрыть.

О каких-то внешних адресах в контексте вкладок я не понял. Это нужно видеть html-код, дать пояснение что к чему, иначе какой-то сыр бор получается.

Vaska 06.01.2021 00:02

Цитата:

Сообщение от рони (Сообщение 532358)
Vaska,
$('[href="#dsGoods2"]').click(() => $('#tab2').click());

Да, этот вариант прекрасно работает.
Моё уважение и большое спасибо!
Хотел бы хотя бы 300 руб. на карту скинуть, российскую.

Vaska 06.01.2021 00:04

laimas, спасибо большое, что поучаствовали. Рони предложил удачный вариант.

Vaska 06.01.2021 20:03

Обновлю тему.

Это табы:
<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>

Это скрипт, который переключает тайтлы табов, присваивает для тайтла, тегу li класс current:
$('#categorymenu').on('click', 'li', function() {
	$('#categorymenu li').removeClass('current');
	$(this).addClass('current');
});


На той же странице сделал меню:
<div class="tab-bar">
	<ul id="hiddenmenu" class="tab-lists">
		<li class="active">
			<div>
				<a id="hidGoods1" href="#dsGoods1">title 1</a>
			</div>
		</li>
		<li class="">
			<div>
				<a id="hidGoods2" href="#dsGoods2">title 2</a>
			</div>
		</li>
		<li class="">
			<div>
				<a id="hidGoods3" href="#dsGoods3">title 3</a>
			</div>
		</li>		
	</ul>
</div>

Это скрипт, который по клику в Меню - переключает тайтлы в Табах, хорошо работает:
$('[href="#dsGoods1"]').click(() => $('#tabGoods1').click());
$('[href="#dsGoods2"]').click(() => $('#tabGoods2').click());
$('[href="#dsGoods3"]').click(() => $('#tabGoods3').click());
});


Добавил скрипт, который должен по клику на тайтле меню - переключать тайтл в меню и присваивать тегу li class active, хорошо работает:
$('#hiddenmenu').on('click', 'li', function() {
$('#hiddenmenu li').removeClass('active');
$(this).addClass('active');
});

Теперь нужно сделать скрипт, который будет по клику по тайтлу Таба - переключать тайтл Меню. Нужно же, чтобы и у тайтла меню и у тайтла вкладок были одинаковые тайтлы при переключении тайтла в табе или в меню.
Написал такой скрипт:
$('#categorymenu').on('click', 'li', function() {
$('#hiddenmenu li').removeClass('active');
$(this).addClass('active');
});

Скрипт работает на половину. Кликая по тйтлу таба - удаляется active у тайтла меню, но не присваивается другому тайтлу меню. В то же время, у тайтла таба присваивается current.
Что я делаю не так?

рони 06.01.2021 20:43

Vaska,
... снова не осилил, не смотря на ваши подробные описания.

Vaska 07.01.2021 02:14

Цитата:

Сообщение от рони (Сообщение 532391)
Vaska,
... снова не осилил, не смотря на ваши подробные описания.

На скриншоте показал к чему привязать мои термины. Я и не говорил, что правильно называю элементы на странице html.

рони 07.01.2021 08:42

Vaska,
можно создать одну функцию для всех кнопок
<!DOCTYPE html>

<html>
<head>
  <title>Untitled</title>
  <meta charset="utf-8">
  <style type="text/css">
  li.active{
      background-color: #FFD700;
  }
  .tab{
      display: none;
  }
  .tab.active{
     display: block;
     height: 70px;
     border-radius: 24px;
     border: 4px solid #A9A9A9;
     padding: 4px;
  }
  ul{
      border: 1px solid #8B4513;
      list-style: none;
      height: 300px;
  }

  </style>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
  <script>
$(function() {
var menu = $('.tab-lists');
var tabs = $('.tab');
menu.on('click', 'li', function(event) {
event.preventDefault();
var index = $(this).prevAll('li').length;
showTab(index);
})
function showTab(index)
{
  $('li', menu).removeClass('active').filter(`:nth-child(${index + 1})`).addClass('active');
  var tab = tabs.removeClass('active').eq(index).addClass('active');
  window.setTimeout(function() {
  $('html, body').stop().animate({scrollTop: tab.offset().top - 200}, 1000);
}, 200)

}
});
  </script>
</head>

<body>
<ul class="tab-lists">
		<li class="active">
			<div>
				<h3>title 1</h3>
			</div>
		</li>
		<li>
			<div>
				<h3>title 2</h3>
			</div>
		</li>
		<li>
			<div>
				<h3>title 3</h3>
			</div>
		</li>
</ul>



<div class="tab active">
		<div class="content bd" >
			<div class="dss-goods-info-content">
				Содержание вкладки 1
			</div>
		</div>
</div>
<div class="tab">
		<div class="content bd" >
			<div class="dss-goods-info-content">
				Содержание вкладки 2
			</div>
		</div>
</div>
<div class="tab">
		<div class="content bd" >
			<div class="dss-goods-info-content">
				Содержание вкладки 3
			</div>
		</div>
</div>
<ul class="tab-lists">
		<li class="active">
			<div>
				<h3>title 1</h3>
			</div>
		</li>
		<li>
			<div>
				<h3>title 2</h3>
			</div>
		</li>
		<li>
			<div>
				<h3>title 3</h3>
			</div>
		</li>
</ul>
<ul class="tab-lists">
		<li class="active">
			<div>
				<h3>title 1</h3>
			</div>
		</li>
		<li>
			<div>
				<h3>title 2</h3>
			</div>
		</li>
		<li>
			<div>
				<h3>title 3</h3>
			</div>
		</li>
</ul>
<ul class="tab-lists">
		<li class="active">
			<div>
				<h3>title 1</h3>
			</div>
		</li>
		<li>
			<div>
				<h3>title 2</h3>
			</div>
		</li>
		<li>
			<div>
				<h3>title 3</h3>
			</div>
		</li>
</ul>

</body>
</html>

Vaska 07.01.2021 12:55

Применил. Всё отлично работает, всё как надо.

Я тут подумал над замечанием laimas, по поводу скачущего контента вверх, и прилипания табов к верхней части браузера, после нажатия на тайтл таба и соглашусь, что лучше сделать отступ от top на 100-200px вниз.
Поискал в интернете, но не нашел, что отвечает за эту функцию в моём коде и как это изменить.
Можете помочь с этим?

рони 07.01.2021 14:11

Цитата:

Сообщение от Vaska
что отвечает за эту функцию в моём коде

ничего, Действия браузера по умолчанию

Цитата:

Сообщение от Vaska
Можете помочь с этим?

на форуме сотни примеров сделать отступ от top на 100-200px вниз

искать scroll к

рони 07.01.2021 14:43

Цитата:

Сообщение от Vaska
сделать отступ от top на 100-200px вниз.

добавлено пост #17, 200 строка 43 изменить на нужное


Часовой пояс GMT +3, время: 14:27.