How can I change my defautl tab in jQuery - asp.net

Question

I want to change the default tab in my jQuery code here:
$(function () {
$("#tabs").tabs({
activate: function () {
var selectedTab = $('#tabs').tabs('option', 'active');
$("#<%= hdnSelectedTab.ClientID %>").val(selectedTab);
},
active: "<%= hdnSelectedTab.Value %>"
});
});
Here are some of my tabs.
<div id="tabs">
<ul id="tabs-name">
<li>Buscar contrato</li>
<li>Cotización</li>
<li>Client</li>
<li>Tiempo</li>
<li>Equipo</li>
<li>Componentes</li>
<li>Intervención terminado</li>
<li>Garantia y reparacion</li>
<li>Archivos</li>
<li>Expedicion</li>
</ul>
<asp:HiddenField ID="hdnSelectedTab" runat="server" Value="0" />
<div id="tabs-searchContractSection" class="menusection">
<contratoBuscarWebControl:contratoBuscarControl ID="WebControl3" runat="server" />
</div>
<div id="tabs-quoteSection" class="menusection">
<cotizacionWebControl:cotizacionControl ID="Header2" runat="server" />
</div>
<div id="tabs-clienteSection" class="menusection">
<ClientWebControl:clientControl ID="Header4" runat="server" />
</div>
<div id="tabs-TimeSection" class="menusection">
<tiempoControlerWebControl:tiempoControler ID="Header5" runat="server" />
</div>
I want to make "tabs-quoteSection" the default tab how can I adjust my jQuery to make this happen. Thank you for any help

Answer 1

I generally suggest to separate client side and server side scripting. You can use .NET results to populate JS yet it may be better to POST or GET the data you need from the back-end.
Consider the following example:
$(function() {
function getTabIndex() {
var min = 0;
var max = $("#tabs-name li").length - 1;
var i = -1;
// Ask .NET for Index via POST
// Push resulting Integer to 'i' variable
if (i == -1 || i > max) {
i = max;
}
return i;
}
var defaultTabIndex = getTabIndex();
$("#tabs").tabs({
active: defaultTabIndex
});
});
<link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
<script src="https://code.jquery.com/jquery-1.12.4.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
<div id="tabs">
<ul id="tabs-name">
<li>Buscar contrato</li>
<li>Cotización</li>
<li>Client</li>
<li>Tiempo</li>
<li>Equipo</li>
<li>Componentes</li>
<li>Intervención terminado</li>
<li>Garantia y reparacion</li>
<li>Archivos</li>
<li>Expedicion</li>
</ul>
<asp:HiddenField ID="hdnSelectedTab" runat="server" Value="0" />
<div id="tabs-searchContractSection" class="menusection">
<contratoBuscarWebControl:contratoBuscarControl ID="WebControl3" runat="server" />
</div>
<div id="tabs-quoteSection" class="menusection">
<cotizacionWebControl:cotizacionControl ID="Header2" runat="server" />
</div>
<div id="tabs-clienteSection" class="menusection">
<ClientWebControl:clientControl ID="Header4" runat="server" />
</div>
<div id="tabs-TimeSection" class="menusection">
<tiempoControlerWebControl:tiempoControler ID="Header5" runat="server" />
</div>
Hope this helps.