Javascript.RU

Создать новую тему Ответ
 
Опции темы Искать в теме
  #1 (permalink)  
Старый 17.11.2020, 12:10
Новичок на форуме
Отправить личное сообщение для Knxx Посмотреть профиль Найти все сообщения от Knxx
 
Регистрация: 17.11.2020
Сообщений: 2

Одностраничник. Включение нужного таба при нажатии на ссылку
Здравствуйте! Есть одностраничник. В верхней части есть 6 кнопок, каждой кнопке соответствует отдельный таб и его содержимое в нижней части страницы. Сейчас при нажатии на любую кнопку происходит прокрутка к якорю в нижней части, а затем табы нужно переключать вручную. Подскажите как сделать чтобы при нажатии на определенную кнопку открывался сразу нужный таб и содержимое.

Код кнопки:
<div class="button-wrapper">
   <a class="btn-solid-reg page-scroll" href="#features">MORE...</a>
</div>


Код переключателя табов:
<ul class="nav nav-tabs" id="argoTabs" role="tablist">
   <li class="nav-item">
   <a class="nav-link active" id="nav-tab-1" data-toggle="tab" href="#tab-1" role="tab" aria-controls="tab-1" aria-selected="false"><i class="fas fa-list"></i>EPC Auto Forge</a>
   </li>
   <li class="nav-item">
   <a class="nav-link" id="nav-tab-2" data-toggle="tab" href="#tab-2" role="tab" aria-controls="tab-2" aria-selected="false"><i class="fas fa-list"></i>All Data Online</a>
   </li>
   </li>
</ul>


Код содержимого табов:
<div class="tab-content" id="argoTabsContent">
   <div class="tab-pane fade show active" id="tab-1" role="tabpanel" aria-labelledby="tab-1">
       .......
   </div>
   <div class="tab-pane fade" id="tab-2" role="tabpanel" aria-labelledby="tab-2">
       .......
   </div>


Буду благодарен за помощь.
Ответить с цитированием
  #2 (permalink)  
Старый 17.11.2020, 22:17
Кандидат Javascript-наук
Отправить личное сообщение для Was-Ja Посмотреть профиль Найти все сообщения от Was-Ja
 
Регистрация: 20.09.2020
Сообщений: 130

var panels=['Main', .... оcтальные ваши панели];
var panel_on = 'Main';

for(let i=1; i<panels.length; i++) document.all('d'+panels[i]).className='dhide';


function SetPanel(newid)
{ document.all('d'+panel_on).className='dhide';
  document.all('d'+newid).className='dshow';
  panel_on=newid;
}

<style type="text/css">
.dshow {display:inherit;}
.dhide {display:none;}
.dstart, .dhide, .dshow { width:100%;}
</style>
Ответить с цитированием
  #3 (permalink)  
Старый 17.11.2020, 22:44
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 33,070

Сообщение от Was-Ja
document.all
https://developer.mozilla.org/ru/doc...I/Document/all
Цитата:
Устарело HTML5
Эта возможность была удалена из веб-стандартов. Хотя некоторые браузеры по-прежнему могут поддерживать её, она находится в процессе удаления. Не используйте её ни в старых, ни в новых проектах. Страницы или веб-приложения, использующие её, могут в любой момент сломаться.
Ответить с цитированием
  #4 (permalink)  
Старый 17.11.2020, 22:52
Кандидат Javascript-наук
Отправить личное сообщение для Was-Ja Посмотреть профиль Найти все сообщения от Was-Ja
 
Регистрация: 20.09.2020
Сообщений: 130

Сообщение от рони
Устарело HTML5
Спасибо!!! По тексту тогда надо все с document.all на document.getElementById заменить.

У себя тоже поправил, спасибо, рони!!!
Ответить с цитированием
  #5 (permalink)  
Старый 17.11.2020, 22:59
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 33,070

Was-Ja,
document.getElementById быстрее всего, но удобнее querySelector*
Ответить с цитированием
  #6 (permalink)  
Старый 17.11.2020, 23:48
Кандидат Javascript-наук
Отправить личное сообщение для Was-Ja Посмотреть профиль Найти все сообщения от Was-Ja
 
Регистрация: 20.09.2020
Сообщений: 130

Сообщение от рони Посмотреть сообщение
Was-Ja,
document.getElementById быстрее всего, но удобнее querySelector*
о, классно, спасибо большое!
Ответить с цитированием
  #7 (permalink)  
Старый 18.11.2020, 11:26
Новичок на форуме
Отправить личное сообщение для Knxx Посмотреть профиль Найти все сообщения от Knxx
 
Регистрация: 17.11.2020
Сообщений: 2

Всем спасибо, сделал через document.getElementById.click()
За querySelector тоже спасибо, удобная вещь. Не знал про него.
Ответить с цитированием
Ответ



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

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


Похожие темы
Тема Автор Раздел Ответов Последнее сообщение
jquery выпадающая информация при нажатии на ссылку Гробовщик Events/DOM/Window 14 25.01.2017 17:07
Значение checked при нажатии на ссылку Step48_rus jQuery 4 10.06.2016 15:53
Активация нужного таба при переходе с другой страницы vladza Общие вопросы Javascript 4 11.11.2014 10:48
Анимация gif картинки при нажатии на ссылку ainur777 Общие вопросы Javascript 2 06.07.2014 16:23
вывод нужного текста в текстовом поле при нажатии на кнопку! fifo4ka Общие вопросы Javascript 7 06.05.2008 13:36