Link to a Specific jQuery Tab
I was searching for a way to link to a specific tab on one page from another. My initial process was to add a check to my JavaScript to see if a parameter was passed to the page containing the tab I wanted. I actually ran the site like this for over a month before I learned that jQuery has already through about this issue and provided a solution.
Let's say you have the following layout for a set of tabs:
<div class="tabs">
<ul>
<li><a href="#tab-1">Tab 1</a></li>
<li><a href="#tab-2">Tab 2</a></li>
<li><a href="#tab-3">Tab 3</a></li>
<li><a href="#tab-4">Tab 4</a></li>
</ul>
<div id="tab-1">Tab 1 Content</div>
<div id="tab-2">Tab 2 Content</div>
<div id="tab-3">Tab 3 Content</div>
<div id="tab-4">Tab 4 Content</div>
</div>
Really standard I know but still helpful.
I need to direct the user to the second tab to act on some important piece of information. I could ask them to do this or I could add #tab-2
to the end of the url for the page to direct them to the correct tab automatically.
<a href="/path/to/file.php#tab-2">Click here
to see some important information!</a>
Scott Keck-Warren
Scott is the Director of Technology at WeCare Connect where he strives to provide solutions for his customers needs. He's the father of two and can be found most weekends working on projects around the house with his loving partner.
Top Posts
- Working With Soft Deletes in Laravel (By Example)
- Fixing CMake was unable to find a build program corresponding to "Unix Makefiles"
- Upgrading to Laravel 8.x
- Get The Count of the Number of Users in an AD Group
- Multiple Vagrant VMs in One Vagrantfile
- Fixing the "this is larger than GitHub's recommended maximum file size of 50.00 MB" error
- Changing the Directory Vagrant Stores the VMs In
- Accepting Android SDK Licenses From The OSX Command Line
- Fixing the 'Target class [config] does not exist' Error
- Using Rectangle to Manage MacOS Windows