Цитата:
О каких-то внешних адресах в контексте вкладок я не понял. Это нужно видеть 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 к |
Цитата:
|
| Часовой пояс GMT +3, время: 05:07. |