Open specific tab on page load with JQuery UI
I made a simple HTML page with JQuery UI tabs. But the customer asked to give URLs for each tab. I was a bit surprised with it, because I remember only how to make default tab on page load. You can do it with the syntax like this:
$("#tabs").tabs( { selected: x });
where 'x' is integer index of tab. So, the task was to determine which tab is requested.
I got the collection of tab links (a href='#') and got the values of its links. Also I parsed the URL and got the 'hash' value of URL. Hash has the value after '#'. After that I looked for whether the string of hash is contained in href attributes.
There are two parts of the code - Javascript and HTML. At first, Javascript:
|
1 2 3 4 5 6 7 8 9 10 11 12 |
<script> $(document).ready(function () { var selectedTab = 0; var mytabs = $('#tabs ul li a').each(function(x, obj) { if(obj.hash.indexOf(location.hash) != -1 && location.hash != '') { selectedTab = x; } }); $("#tabs").tabs( { selected: selectedTab }); }); </script> |
The second part - HTML code - looks very coomon.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 |
<div id="tabs"> <ul> <li><a href="#tabs-1">Title of tab 1</a></li> <li><a href="#tabs-2">Title of tab 2</a></li> <li><a href="#tabs-3">Title of tab 3</a></li> </ul> <div id="tabs-1"> Text for tab-1 </div> <div id="tabs-2"> Text for tab-2 </div> <div id="tabs-3"> Text for tab-3 </div> </div> |
Get the host of the URL with JavaScript or TypeScript
Execute Jenkins Docker image at Windows 11
Add the application as a service at Windows Server