Javascript.RU

Создать новую тему Ответ
 
Опции темы Искать в теме
  #11 (permalink)  
Старый 05.01.2021, 23:57
Профессор
Отправить личное сообщение для laimas Посмотреть профиль Найти все сообщения от laimas
 
Регистрация: 14.01.2015
Сообщений: 12,990

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

О каких-то внешних адресах в контексте вкладок я не понял. Это нужно видеть html-код, дать пояснение что к чему, иначе какой-то сыр бор получается.
Ответить с цитированием
  #12 (permalink)  
Старый 06.01.2021, 00:02
Профессор
Отправить личное сообщение для Vaska Посмотреть профиль Найти все сообщения от Vaska
 
Регистрация: 08.05.2017
Сообщений: 178

Сообщение от рони Посмотреть сообщение
Vaska,
$('[href="#dsGoods2"]').click(() => $('#tab2').click());
Да, этот вариант прекрасно работает.
Моё уважение и большое спасибо!
Хотел бы хотя бы 300 руб. на карту скинуть, российскую.
Ответить с цитированием
  #13 (permalink)  
Старый 06.01.2021, 00:04
Профессор
Отправить личное сообщение для Vaska Посмотреть профиль Найти все сообщения от Vaska
 
Регистрация: 08.05.2017
Сообщений: 178

laimas, спасибо большое, что поучаствовали. Рони предложил удачный вариант.
Ответить с цитированием
  #14 (permalink)  
Старый 06.01.2021, 20:03
Профессор
Отправить личное сообщение для Vaska Посмотреть профиль Найти все сообщения от Vaska
 
Регистрация: 08.05.2017
Сообщений: 178

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

Это табы:
<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.
Что я делаю не так?
Ответить с цитированием
  #15 (permalink)  
Старый 06.01.2021, 20:43
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 33,070

Vaska,
... снова не осилил, не смотря на ваши подробные описания.
Ответить с цитированием
  #16 (permalink)  
Старый 07.01.2021, 02:14
Профессор
Отправить личное сообщение для Vaska Посмотреть профиль Найти все сообщения от Vaska
 
Регистрация: 08.05.2017
Сообщений: 178

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

Последний раз редактировалось Vaska, 07.01.2021 в 22:49.
Ответить с цитированием
  #17 (permalink)  
Старый 07.01.2021, 08:42
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 33,070

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>

Последний раз редактировалось рони, 07.01.2021 в 19:28.
Ответить с цитированием
  #18 (permalink)  
Старый 07.01.2021, 12:55
Профессор
Отправить личное сообщение для Vaska Посмотреть профиль Найти все сообщения от Vaska
 
Регистрация: 08.05.2017
Сообщений: 178

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

Я тут подумал над замечанием laimas, по поводу скачущего контента вверх, и прилипания табов к верхней части браузера, после нажатия на тайтл таба и соглашусь, что лучше сделать отступ от top на 100-200px вниз.
Поискал в интернете, но не нашел, что отвечает за эту функцию в моём коде и как это изменить.
Можете помочь с этим?
Ответить с цитированием
  #19 (permalink)  
Старый 07.01.2021, 14:11
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 33,070

Сообщение от Vaska
что отвечает за эту функцию в моём коде
ничего, Действия браузера по умолчанию

Сообщение от Vaska
Можете помочь с этим?
на форуме сотни примеров сделать отступ от top на 100-200px вниз

искать scroll к
Ответить с цитированием
  #20 (permalink)  
Старый 07.01.2021, 14:43
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 33,070

Сообщение от Vaska
сделать отступ от top на 100-200px вниз.
добавлено пост #17, 200 строка 43 изменить на нужное
Ответить с цитированием
Ответ



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

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


Похожие темы
Тема Автор Раздел Ответов Последнее сообщение
Возврат на нужную вкладку 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