How to deep link to a specific tab from a link on the same p

Topic: How to deep link to a specific tab from a link on the same page or another page

monkee priority asked 2 years ago

using a link on one page, link to a specific tab on another page so that when clicked, you will go to desired tab on the desired page. The link could be on the same page as the tabs or another page.

Page always open with the first tab open, not the desired tab as this image shows.

**My goal is that page would open with this tab initially loaded based on the hashtag in the url enter image description here

HTML RENDER AS DELIVERED TO BROWSER WINDOW

.btn___solidBRAND, .rdx_subnavSELECTED { border: 1px solid goldenrod!important; background: goldenrod!important; color: white!important; } .btn___rdxOUTLINED { color: #981e21!important; background-color: transparent!important; background: transparent!important; border: 1px solid #555!important; padding: .5rem .325rem .325rem .325rem; font-size: .75rem; line-height: .5; border-radius: 0; text-transform: uppercase; transition: color .15s ease-in-out, background-color .15s ease-in-out, border-color .15s ease-in-out, box-shadow .15s ease-in-out; } .btn___rdxOUTLINED:hover { color: #cc8820!important; border-bottom-color: #cc8820!important; } .btn___rdxSOLID { color: goldenrod!important; background-color: transparent!important; background: transparent!important; border: 1px solid #555!important; padding: .5rem .325rem .325rem .325rem; font-size: .75rem; line-height: .5; border-radius: 0; text-transform: uppercase; transition: color .15s ease-in-out, background-color .15s ease-in-out, border-color .15s ease-in-out, box-shadow .15s ease-in-out; } .nav-tabs .nav-item.show .nav-link, .nav-tabs .nav-link.active { color: pink; border-color: white; } ul.nav.nav-tabs.rdx_tabs{ margin-bottom: 0!important; } .rdx_tabs { border-bottom: 0; background: white; } .rdx_nav-item {background: #ddd;} a.nav-item .nav-link.rdx_tabLINK { color:#981e21!important; } a.nav-link.active.rdx_tabLINK { color:goldenrod!important; } } characters 393 listed

taken 140 available

verboten 140 available

wanted 140 available

who's who? 8 members

codename status faceclaim preference type member Kirby ¹¹ | 0 | | he-him-his / he-him-his | | Kirby ¹¹ monk ¹ | 0 | 3 | 3 | 3 | he-him-his / he-him-his | 3 | 3 | 3 | monk ¹ Pink ¹⁰ | 0 | | she-her-hers / she-her-hers | | Pink ¹⁰ T2u1 ² | 0 | | he-him-his / he-him-his | | T2u1 ² T2u13 ¹³ | 0 | | he-him-his / he-him-his | | T2u13 ¹³ T2u14 ¹⁴ | 0 | | he-him-his / he-him-his | | T2u14 ¹⁴ T2u15 ²⁶ | 0 | | he-him-his / he-him-his | | T2u15 ²⁶ T2u2 ³ | 0 | 3 | 1 | 3 | he-him-his / he-him-his | 3 | 1 | 3 | T2u2 ³

Add comment

Michał Duszak staff answered 2 years ago

0 0 Best answer

Hello, try to show certain tab programmatically just after the page is loaded. Take advantage of URL hash. For example, here I self defined the hash in the first line. Then I show certain tab. Note that in my example, the toggler would have the same ID as my URL Hash.

window.location.hash = '#verboten'
let hash = window.location.hash
let tabVerbotenInstance = mdb.Tab.getInstance(document.querySelector(hash));
tabVerbotenInstance.show()

Add comment

Write

Create snippet

FREE CONSULTATION

Hire our experts to build a dedicated project. We'll analyze your business requirements, for free.

Status

Answered

Specification of the issue

ForumUser: Priority
Premium support: Yes
Technology: MDB Standard
MDB Version: MDB5 3.8.0
Device: Desktops, tablets, mobile, all
Browser: safari, chrome, bravo, firefox
OS: OS X
Provided sample code: No
Provided link: No

monkee

57Support score
10Questions 1Answers 4Snippets