Цитата:
О каких-то внешних адресах в контексте вкладок я не понял. Это нужно видеть 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, время: 14:27. |