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>
|
Если совсем невмоготу возложить это на сервер, то можно вызывать страницу с табами с параметрами поиска. Вот так
<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>
|
спс очень помог
|
| Часовой пояс GMT +3, время: 03:15. |