Переход на нужную вкладку таба по 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');
});
|
Цитата:
|
Цитата:
Ссылка работает, по клику перемещает к вкладке #dsGoods2 и открывает содержимое вкладки #dsGoods2. Однако не переключает на заголовок таба #tab2, а остается в заголовке #tab1. Можете с этим помочь? |
Цитата:
<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>
|
Цитата:
и смотрите пример от laimas, |
В пределах вкладок ваш вариант работает, как и мой. Поставил ссылку за пределами вкладок, ваш вариант не работает как и мой. Может я чего не так делаю, но в вашем примере нет внешне расположенной ссылки, чтобы протестировать.
|
Цитата:
|
Цитата:
|
Цитата:
|
Vaska,
$('[href="#dsGoods2"]').click(() => $('#tab2').click());
|
Цитата:
О каких-то внешних адресах в контексте вкладок я не понял. Это нужно видеть html-код, дать пояснение что к чему, иначе какой-то сыр бор получается. |
Цитата:
Моё уважение и большое спасибо! Хотел бы хотя бы 300 руб. на карту скинуть, российскую. |
laimas, спасибо большое, что поучаствовали. Рони предложил удачный вариант.
|
Обновлю тему.
Это табы: <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. Что я делаю не так? |
Vaska,
... снова не осилил, не смотря на ваши подробные описания. |
Цитата:
|
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>
|
Применил. Всё отлично работает, всё как надо.
Я тут подумал над замечанием laimas, по поводу скачущего контента вверх, и прилипания табов к верхней части браузера, после нажатия на тайтл таба и соглашусь, что лучше сделать отступ от top на 100-200px вниз. Поискал в интернете, но не нашел, что отвечает за эту функцию в моём коде и как это изменить. Можете помочь с этим? |
Цитата:
Цитата:
искать scroll к |
Цитата:
|
Цитата:
Однако как-то странно работает. Первый тайтл таба отличается от ожидаемого результата при нажатии. Если страницу прокрутить вверх и табы соприкоснутся с верхом браузера и нажать на первый тайтл таба, то от top отступ в 2 раза больше, чем указано в параметре. У других тайтлов таба и меню, реагирует одинаково и соответствует заданному параметру. Если страница только загрузилась и нажать на первый тайтл таба, то ничего не происходит, а другие реагируют правильно, страница подтягивается вверх с указанным отступом в параметре. Если страницу прокрутить немного вверх и снова нажать на первый тайтл таба, то страница уходит вниз а не на верх. Снова нажать на первый тайтл таба - страница снова вниз продвигается. И так каждый раз при нажатии. |
Vaska,
скопируйте код снова #17, если будут проблемы, строка 44 число 200 -- попробуйте изменить от 50 до 500 |
Цитата:
Большое спасибо и уважение! |
Vaska,
:victory: |
Цитата:
На панели табов есть тайтл таба, называется: Пожаловаться на товар.
<li class="fr">
<div class="tab-inner">
<a href="javascript:login_dialog();" class="inform">Пожаловаться на товар</a>
</div>
</li>
Эта ссылка вызывает диалоговое всплывающее окно, которое теперь стало открываться и сразу двигаться вверх, прокручивая страницу вниз. Довольно сильно прокручиват страницу вниз и диалоговое окно уходит под верхнюю часть браузера. На сколько оно туда уходит, зависит от параметра, который делает отступ от top. Чем больше отступ, тем дальше уходит всплывающее окно под верх браузера. |
Странно однако, так и осталось впечатление, что неудачная верстка заставляет иметь какой-то вычурный js-код. Почему "едет вверх", если есть это?
|
Vaska,
можно только гадать как устроена ваша страница, и что вы хотите сделать. возможно надо, что -то где-то исключить типа ... menu.on('click', 'li:not(.fr)', |
Цитата:
Цитата:
Постараюсь всё запомнить. |
рони,
можете помочь добавить код, чтобы можно было с другой страницы сайта, по ссылке https://site.com/Goods/index=141#dsGoods2 попасть на страницу того же сайта, на которой расположен таб id="tabGoods2" и его вкладка id="dsGoods2"? Если я просто иду по ссылке https://site.com/Goods/index=141#dsGoods2, то открывается страница как обычно, на вкладку не переносит. На странице, на которой есть табы и вкладки, есть ваш код, в том числе:
$('[href="#dsGoods2"]').click(() => $('#tabGoods2').click());
Но это не работает, если приходить по ссылке с другой страницы. |
Vaska,
как вариант добавить следом
if(window.location.hash == '#dsGoods2') $('#tabGoods2').click();
|
Цитата:
|
Vaska,
пока без вариантов ... |
Цитата:
// Нажмите на таб2, чтобы скрыть другую вкладку и их строку заголовка.
$('#tab2').click(function(){
$('.bd').css('display','none');
$('#dsGoods2').css('display','');
$('.hd').css('display','none');
});
if(window.location.hash == '#dsGoods2') $('#tabGoods2').click();
Большое спасибо! |
Vaska,
:victory: |
| Часовой пояс GMT +3, время: 22:18. |