Javascript-форум (https://javascript.ru/forum/)
-   Элементы интерфейса (https://javascript.ru/forum/dom-window/)
-   -   tab boostrap (https://javascript.ru/forum/dom-window/79731-tab-boostrap.html)

misha.korolcov 15.03.2020 23:43

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>

voraa 16.03.2020 08:44

Если совсем невмоготу возложить это на сервер, то можно вызывать страницу с табами с параметрами поиска. Вот так
<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>

misha.korolcov 16.03.2020 12:46

спс очень помог


Часовой пояс GMT +3, время: 01:09.