![]() Use a regular expression to generate the desired URL format.Retrieve the name of the target tab and activate it by using Bootstrap’s tab method.If that is the case, it means we want to display the contents of the second or third tab (in our example). Next, we check to see if the URL contains a hash. With the HTML and CSS in place, it’s time to look at the required JavaScript code (this is the important bit).įirst, when the DOM is ready, we retrieve the page URL and use a regular expression to remove its trailing slash. For instance, if the original URL is something/, the modified URL will be something. It’s worth mentioning that in a previous tutorial, we used similar styles to build a custom tab component. Nothing too fancy, just some basic styles. Next we specify a few CSS rules for our component. To create the tabs, we’ll take advantage of example code for the tab component that Bootstrap provides: How to Add Deep Linking to the Bootstrap 4 Tabs Component We’ll kick things off with a starter template taken from Bootstrap’s documentation. Excited to see how we’ll build this? If the answer is yes, let’s get started! 1. A certain level of competency for all three of these is assumed. We’ll outline three main steps the HTML, the CSS, and the JavaScript. Note that the URL reflects the selected tab By giving each of the tabs its own URL, the content becomes shareable. If you grab the URL of a tab and open it in another browser/window the corresponding tab will be visible. ![]() How the URL changes as you click on the tabs.To better understand what we’re working towards, check out the demo page and pay attention to two things: Today we’ll learn how to add “deep linking” to the Bootstrap 4 tabs.
0 Comments
Leave a Reply. |
AuthorWrite something about yourself. No need to be fancy, just an overview. ArchivesCategories |