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:
<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.
<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>
Net 10.0 is not available for Azure Functions. How to fix
Custom Label with multiple styles in TextField of Fluent UI
First impressions after using the new SPFX 1.22.2 with Heft