Javascript прокручивает разделы, а также прокручивает их до раздела, но открывает соответствующую вкладку навигации.

Привет



У меня есть навигационное меню, в котором есть ссылки, которые прокручивают до соответствующего раздела, которое, похоже, работает, но в том же навигационном меню есть и другие ссылки, которые прокручивают до соответствующего раздела, но также есть код панели вкладок nav-tabs, в котором я хотел бы открыться при нажатии на ссылку, например, у меня есть следующий код в меню навигации

 <script>


$('#bs-example-navbar-collapse-1 a.scrolllinktwo[data-toggle="tab"]').click(function(e) {


e.preventDefault()


$("#myTab [href=" + e.target.hash + "]").tab('show')


});


$('a.scrolllinktwo[data-toggle="tab"]').on('shown.bs.tab', function(e) {


var divId = $(e.target).attr("href")


$('html,body').animate({


scrollTop: $(divId).offset().top


}, 500);


});


$('a.scrolllink, a.scrolllinktwo').click(function(event){


event.preventDefault()


$('html, body').animate({


scrollTop: $( $(this).attr('href') ).offset().top - 300


}, 500);


return false;


});


</script>

HTML: Я хотел бы, чтобы ссылка «Домой» прокручивала до главного раздела веб-страницы, а ссылка «Стеклянные задние двери», например, прокручивала до раздела, где находятся вкладки, но также открывала панель вкладок для стеклянных задних дверей, чтобы отобразить соответствующую информацию.

содержание

На данный момент у меня есть следующий код, он работает, но беспорядочно, так как мне приходится дважды щелкнуть ссылку «Стеклянная задняя дверь» в меню навигации, и каждый из них прокручивается немного дальше. Мой код вкладки навигации приведен ниже.

 <ul class="nav nav-tabs" id="myTab" role="tablist"> <li class="nav-item"> <a class="nav-link active" id="sideglass-tab" data-toggle="tab" href="#sideglass" role="tab" aria-controls="sideglass" aria-selected="true"><i class="flaticon-battery"></i>Side Glass</a> </li> <li class="nav-item"> <a class="nav-link" id="glassreardoors-tab" data-toggle="tab" href="#glassreardoors" role="tab" aria-controls="glassreardoors" aria-selected="false"><i class="flaticon-break"></i>Glass Rear Doors</a> </li> <li class="nav-item"> <a class="nav-link" id="doorhandleslocks-tab" data-toggle="tab" href="#doorhandleslocks" role="tab" aria-controls="doorhandleslocks" aria-selected="false"><i class="flaticon-seat-belt"></i>Door Handles &amp; Locks</a> </li> <li class="nav-item"> <a class="nav-link" id="gasstruts-tab" data-toggle="tab" href="#gasstruts" role="tab" aria-controls="gasstruts" aria-selected="false"><i class="flaticon-settings"></i>Gas Struts</a> </li> </ul> <div class="tab-content"> <div class="tab-pane fade show active" id="sideglass" role="tabpanel" aria-labelledby="sideglass-tab"> <div class="row"> <div class="col-lg-12 col-md-12"> <div class="single-service"> <i class="flaticon-battery"></i> <h3>Side Glass</h3> <p> Tell us what your car needs or ask for a diagnostic.






Receive a free, fast, fair & transparent price quote.






</p> </div> </div> </div> </div> <div class="tab-pane fade" id="glassreardoors" role="tabpanel" aria-labelledby="glassreardoors-tab"> <div class="row"> <div class="col-lg-12 col-md-12"> <div class="single-service"> <i class="flaticon-battery"></i> <h3>Glass Rear Doors</h3> <p> Tell us what your car needs or ask for a diagnostic.






Receive a free, fast, fair & transparent price quote.



</p> </div> </div> </div> </div> </div>

HTML: Javascript ниже.

 <nav id="nav"> <div id="bs-example-navbar-collapse-1"> <ul class="menus" id="mainMenu"> <li><a href="#home" class="parent-link scrolllink">Home</a></li> <li><a href="#about" class="parent-link scrolllink">About</a></li> <li><a data-toggle="tab" href="#sideglass" class="parent-link scrolllinktwo" aria-controls="#sideglass">Side Glass</a></li> <li><a data-toggle="tab" href="#glassreardoors" class="parent-link scrolllinktwo" aria-controls="#glassreardoors">Glass Rear Doors</a></li> <li><a data-toggle="tab" href="#doorhandleslocks" class="parent-link scrolllinktwo" aria-controls="#doorhandleslocks">Door Handles &amp; Locks</a></li> <li><a data-toggle="tab" href="#gasstruts" class="parent-link scrolllinktwo" aria-controls="#gasstruts">Gas Struts</a></li> <li><a href="#contact" class="parent-link scrolllink">Contact</a></li> </ul> <div id="mobileMenu"></div> </div> </nav>

Код (JavaScript):

В обоих случаях я бы посоветовал прекратить использовать JS для вещей, которые больше не требуют написания сценариев. Это не 2012 год.

 html {

scroll-behavior: smooth;
}

Код (разметка): Посмотрите мою ручку здесь:
https://codepen.io/jason-knight/pen/qBVXBmr

Просто позвольте хеш-ссылкам на странице, указывающим на идентификаторы, сделать вашу тяжелую работу. То же самое можно сказать и о вкладках!
https://codepen.io/jason-knight/pen/WNXgKLq?editors=1100

Самое интересное то, что вы можете ссылаться на вкладку из любого места, поскольку она управляется хэш-ссылкой, и даже будет плавно прокручиваться до вкладки, если вы создадите ссылку в другом месте, поскольку все ссылки на странице можно плавно прокручивать с помощью «scroll-behavior». ".

У подхода с вкладками есть один недостаток: он переключается обратно на вкладку «по умолчанию» (последнюю), если вы хэшируете ссылку в другом месте страницы.

Есть еще один метод, который я мог бы показать вам, используя радио-ВХОД, если вам нужно не иметь возможности хэшировать ссылку на них и/или заполнять историю браузера. Те же методы можно использовать для создания целых модальных диалоговых веб-сайтов без единого скрипта.
https://levelup.gitconnected.com/modal-dialog-driven-websites-without-javascript-16e858615780

Если вы израсходовали три бесплатных чтения в месяц, демо-версия находится здесь:
https://cutcodedown.com/for_others/medium_articles/modalSite/

Это больше не задача JavaScript.

Конечно, это не работа по отупляющим умственным фреймворкам мусора, таким как jQuery, которые учат вас, как и где НЕ использовать JavaScript каким-либо образом, в любой форме или форме.

Примечание: у вас там достаточно «DIV даром»? Общий раздутый код и ерунда вроде ролей Aria, конечно, вам ничем не помогут.

но это связано с использованием столь же интеллектуально сложного среднего пальца для объяснения того, почему HTML и CSS вообще существуют, это чушь.

Или это фейлвинд? Кто может сказать больше?!? Это действительно шокирует, как весь этот фреймворковый мусор каким-то образом заставляет людей думать, что писать в два-десять раз больше кода, игнорируя основы доступности, используя JS просто так, каким-то волшебным образом «проще» или «лучше для совместной работы» или что-то еще.

100% ерунда, выдумки и наглая ЛОЖЬ, которую они о них утверждают.