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>

$(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>

<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>

Text for tab-1

</div>

Text for tab-2

</div>

Text for tab-3

</div>

8 April 2019, admin
Javascript
Tags: CSS, Javascrpt, jQuery, string, string contains
Comments: (0)

Open specific tab on page load with JQuery UI

No Comments »

Leave a comment

New posts