change value of <li>

Question

well, im having a problem with this. im trying to change li to another li after function that returns PartialView. I want to focus li that its not the current li focus.

in the view :

<ul>
    <li id="datos"><a href="#tabs-1r">Datos</a></li>
    <li id="resultado"><a href="#tabs-2r">Resultado</a></li>
</ul>
<div id="tabs-1r" style="top: 0px; width: 100px;">
    <form id="consultaCE">
       <left>
           <table style="text-align: left">
              <tr >
                 <td> <label class="labelNormal">Nombre</label></td>
                 <td>   @Html.TextBoxFor(model => model.NombreCentroEducativo, null, new                                    { @class = "textBoxLarge", @maxlength = "60" })</td>
              </tr>
              <tr >
                 <td > <label class="labelNormal">Nro. Establecimiento</label></td>
                 <td>   @Html.TextBoxFor(model => model.NroEstablecimientoCentroEducativo, null, new { @class = "textBoxLarge" }) </td>
              </tr>                      
              <tr>
                 <td> <label class="labelNormal">Departamento</label></td>
                 <td> @Html.DropDownListFor(model => model.DepartamentoCentroEducativo, ViewBag.Departamentos as IEnumerable<SelectListItem>, new { @id = "deptoID", @class = "dropdownLarge" }) </td>  
              </tr>
              <tr>
                 <td> <label class="labelNormal">Localidad</label></td>
                 <td> @Html.DropDownListFor(model => model.LocalidadCentroEducativo, ViewBag.Localidades as IEnumerable<SelectListItem>, new { @id = "dropLoc", @class = "dropdownLarge" })   </td>    
              </tr>
              <tr>
                 <td > <label class="labelNormal">Paraje/Barrio</label></td>
                 <td>  @Html.DropDownListFor(model => model.ParajeBarrioCentroEducativo, ViewBag.Parajes as IEnumerable<SelectListItem>, new { @id = "dropParaje", @class = "dropdownLarge" })   </td> 
              </tr>
              <tr>
                 <td > <label style="margin-left:15px" class="labelNormal">Subsistema</label></td>
                 <td>   @Html.DropDownListFor(model => model.SubsistemaCentroEducativo, ViewBag.Subsistemas as IEnumerable<SelectListItem>, new { @class = "dropdownLarge" }) </td> 
              </tr>
           </table>  
       </left>
       <button id="btnBuscarCentros" style="margin-top: 10px;" class="btn btn-primary">
                                    Buscar
       </button>
    </form>
</div>
<div id="tabs-2r">
    <div id="ResultadoBusquedaCE" style="height: auto; float: left; font-size: 12px;">
    </div>
                                @Html.ActionLink("Exportar Excel", "GuardarConsultaCE", new { }, new { @class = "btn btn-primary", @style = "color:white" })
</div>

here "Datos" it is active.

Javascript function :

$('#btnBuscarCentros').click(function ()
          {

              $.ajax({
                url: "@Url.Action("ConsultaCentroEducativos2")",
                data: $('#form').serialize(),
                dataType: "html",
                type: "POST",
                error: function() {
                    alert("An error occurred.");
                },
                success: function(data) {
                  $('#ResultadoBusquedaCE').html(data)     
                }
            });

            return false;
        });

i want to go to "Resultado" and li active. Sorry for my english, thanks

Answer 1

Try changing the success callback as follows:

success: function(data) {
 $('#ResultadoBusquedaCE').html(data) ;
 $('#resultado').addClass('active'); // Add your activa class for highlighting the li
 $('#resultado a').trigger('click'); // trigger a click on hyperlink inside the li
}