Ändern Sie Tabs und den Inhalt der Registerkarte programmgesteuert in Jquery

Question

Ich habe 5 Registerkarten in meiner Anwendung.Ich habe es mit Jquery getan. Momentan, wenn die Seite geladen wird, geht sie zur ersten Registerkarte und zeigt ihren Inhalt an. Hier möchte ich die letzte Registerkarte und ihren Inhalt laden, wenn die Seite geladen wird.

Ich möchte nicht die Tab-Reihenfolge ändern. Wenn die Seite geladen wird, sollte sie die letzte Registerkarte und ihren Inhalt laden.

Ich habe mit etwas Code versucht, aber es lädt die erste Registerkarte und ihren Inhalt. Ich habe die html und jQuery-Code in den

<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' , 
} 

); 

folgenden enthalten

Answer 1

Ich bin nicht sicher, wo Sie die Syntax für (http://api.jqueryui.com/tabs/) erhalten, so dass ich nur die ungültigen Argumente entfernt.

Sie das aktive Element mit dem Argument active und dann den Index setzen:

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

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