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, время: 01:09. |