Change tabs and contents of the tab programmatically in Jquery

Question

I have 5 tabs in my application.I have done it using Jquery. Currently when the page loads it goes to first tab and views its contents. Here i want to load the last tab and its content when the page loads.

I don't want to change the tab order. When the page loads it should load the last tab and its contents.

I have tried with some code but it loads the first tab and its contents. I have included the html and Jquery code in the following

<div class="track-content track-content1" id="tab-container">
            <ul class="track-nav track-nav1" id="ultabs">
                <li id="liHome"><a href="home.html?oJjeW0EE268roaAJQapM65hyD134lhhhN3F5j7KVQKs=" class="active tabbify" data-id="Home">home</a></li>
                <li id="linkdailyReport"><a href="Report/DailyReport.html?oJjeW0EE268roaAJQapM65hyD134lhhhN3F5j7KVQKs=" class="tabbify" data-id="dailyReport">Daily Report</a></li>
                <li id="liTeamReport"><a href="Report/TeamReport.html?oJjeW0EE268roaAJQapM65hyD134lhhhN3F5j7KVQKs=" class="tabbify" data-id="teamReport">Team Report</a></li>
                <li id="liPulledReport"><a href="Report/PulledReport.html?oJjeW0EE268roaAJQapM65hyD134lhhhN3F5j7KVQKs=" class="tabbify" data-id="PulledReport">Pulled Report</a></li>
                <li id="liMarkReport"><a href="Report/MarkReport.html?oJjeW0EE268roaAJQapM65hyD134lhhhN3F5j7KVQKs=" class="tabbify" data-id="MarkReport">Marked Report</a></li>

                <li id="liManagePulled"><a href="Report/ManagePulled.html?oJjeW0EE268roaAJQapM65hyD134lhhhN3F5j7KVQKs=" data-id="ImageUpload" class="tabbify">Image Upload</a></li>
                <li id="liMetrics"><a href="Metrics/Metric.html?oJjeW0EE268roaAJQapM65hyD134lhhhN3F5j7KVQKs=" data-id="Metric" class="tabbify">Metric</a></li>
                <li id="liAdmin"><a href="Admin/MaintenanceScreens.html?oJjeW0EE268roaAJQapM65hyD134lhhhN3F5j7KVQKs=" class="tabbify">Admin</a></li>

                <li id="liLogout" style="float: right; cursor: pointer; padding: 3px 10px;">
                    <img class='homeicon' src="images/Logout.png" alt="Logout" id="Img2" style="width: 24px; height: 24px;" /></li>
                <li id="lisitedetails" style="float: right; cursor: pointer; padding-top: 3px;">
                    <img class='homeicon' src="images/Facility.png" alt="Facility" id="Img1" style="width: 24px; height: 24px;" /></li>

                <li style="float: left; cursor: pointer; padding-top: 3px;">
                    <img src="images/Expand.png" id="btnHead" alt="Show/Hide" style="width: 24px; height: 24px;" class='homeicon' />
                </li>
            </ul>
            <!-- <div style="float: right; position: fixed; display: inline-block; color: white; z-index: 9999999; padding-top: 5px; padding-right: 15px;">
                <img src="images/Expand.png" id="btnHead" style="width:24px;height:24px;" />
            </div>-->              

            <div id="tabContent" class="tab-content">
                <!-- Tab Contents Loaded From Ajax -->
            </div>
            <!--#tab-content-->
        </div>
$("ul.track-nav").tabs(

"#tabContent",
{   
    effect: 'ajax', history: true, tabs: 'a.tabbify' ,
}

); 

Answer 1

i'm not sure where you get the syntax for ( http://api.jqueryui.com/tabs/ ), so i just removed the invalid arguments.

you can set the active element with the argument active and then the index:

$( function() {
  $( "#tab-container" ).tabs({
    active: $('#tab-container li a').length-1
  });
} );

see: https://jsfiddle.net/xkm7skjL/1/