Javascript.RU

Создать новую тему Ответ
 
Опции темы Искать в теме
  #1 (permalink)  
Старый 15.03.2020, 22:43
Аспирант
Отправить личное сообщение для misha.korolcov Посмотреть профиль Найти все сообщения от misha.korolcov
 
Регистрация: 05.09.2019
Сообщений: 64

tab boostrap
доброе время суток есть страница с табами bostrap как мне зделать чтоб с другой странице при клике на силку переходил на опренений таб, тоесть есть главная страница и когда я кликаю на силку переходить на ету страницу и откриваетьца допустим не tab 1 а tab 2



<div class="col-12 col-md-4 col-lg-3 links-exchange order-md-last order-first mb-4 mt-5 pt-5">
                        <ul class="nav nav-tabs border-none-main" id="myTab" role="tablist">
                            <li class="nav-item mb-2">
                                <a class="nav-link active title font-size-main-smoll" id="home-tab" data-toggle="tab" href="#home" role="tab" aria-controls="home" aria-selected="true">Economic Calendar</a>
                            </li>
                            <li class="nav-item mb-2">
                                <a class="nav-link title font-size-main-smoll" id="profile-tab" data-toggle="tab" href="#profile" role="tab" aria-controls="profile" aria-selected="false">Cryptocurrency Market</a>
                            </li>
                            <li class="nav-item mb-2">
                                <a class="nav-link title text-lefts font-size-main-smoll" id="contact-tab" data-toggle="tab" href="#contact" role="tab" aria-controls="contact" aria-selected="false">All pairs</a>
                            </li>
                                <li class="nav-item" id="headingThree" data-toggle="collapse" data-target="#collapseThree" aria-expanded="false" aria-controls="collapseThree">
                                <a class="nav-link title font-size-main-smoll" id="foo-tab" data-toggle="tab" href="#foo" role="tab" aria-controls="contact" aria-selected="false">
                                 All assets <img src="img/Arrow.png" alt="" class="ml-auto mr-3">
                                </a>
                            </li>            
                            <li class="nav-item mb-2">
                                <div id="accordion">
                                        <div id="collapseThree" class="collapse" aria-labelledby="headingThree" data-parent="#accordion">
                                           <ul class="pl-0" id="myTab" role="tablist">
                                           <li class="" id="foo-tab" data-toggle="tab" href="#foo" role="tab" aria-controls="contact" aria-selected="false">
                                            <a class=" font-size-main-smoll">Bitcoin </a>
                                            </li>
                                            
                                            
                                            
                                             <li  class="" id="seven-tab" data-toggle="tab" href="#seven" role="tab" aria-controls="contact" aria-selected="false">
                                              <a class=" font-size-main-smoll">Ethereum </a>
                                               </li>
                                                <li class="" id="eight-tab" data-toggle="tab" href="#eight" role="tab" aria-controls="contact" aria-selected="false">
                                                <a class=" font-size-main-smoll">Ripple </a>
                                                 </li>
                                                </ul>
                                        </div>
                                </div>  
                            </li>   
                        </ul>
                    </div>
Ответить с цитированием
  #2 (permalink)  
Старый 16.03.2020, 07:44
Профессор
Отправить личное сообщение для voraa Посмотреть профиль Найти все сообщения от voraa
 
Регистрация: 03.02.2020
Сообщений: 207

Если совсем невмоготу возложить это на сервер, то можно вызывать страницу с табами с параметрами поиска. Вот так
<a href="pagewithtabs.html?tab=home-tab">Home tab </a>
<a href="pagewithtabs.html?tab=profile-tab">Profile tab </a>

На самой странице с табами вставить такой скрипт после

<ul class="nav nav-tabs border-none-main" id="myTab" role="tablist">
....
</ul>

<script>
	if (window.location.search) { //Есть строка ?...
		let kbeg = window.location.search.indexOf('tab=')+4
		let kend = window.location.search.indexOf('&', kbeg)
		let acttabname = kend<0? window.location.search.slice( kbeg) : window.location.search.slice( kbeg, kend) // имя вкладки, которую делаем активной
		let oldact = document.querySelector('#myTab a[class~="active"]') // предыдущая активная вкладка
		let newact = document.getElementById(acttabname)
		if (oldact !== newact) {
			oldact.classList.remove('active')
			newact.classList.add('active')
		} 
	}

</script>
Ответить с цитированием
  #3 (permalink)  
Старый 16.03.2020, 11:46
Аспирант
Отправить личное сообщение для misha.korolcov Посмотреть профиль Найти все сообщения от misha.korolcov
 
Регистрация: 05.09.2019
Сообщений: 64

спс очень помог
Ответить с цитированием
Ответ



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

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


Похожие темы
Тема Автор Раздел Ответов Последнее сообщение
Добавление custom класса как item класса tab. Unrecognized alias: widget. Postgeograph ExtJS 6 13.12.2018 10:56
Помогите новичку сделать закрывающийся tab sam92 Общие вопросы Javascript 1 24.03.2017 23:38
Как получить содержание tab? Veterinar jQuery 1 26.08.2015 22:00
Активация нужного таба при переходе с другой страницы vladza Общие вопросы Javascript 4 11.11.2014 09:48
Перескакивает в начало страницы, A href="#" (Якорь) icesewer Общие вопросы Javascript 5 18.12.2013 20:25