0

Quiero hacer una funcion con javascript. Lo que quiero que haga es que cuando haga un tab o cambie de opcion saque una alerta diciendo en que tab o opcion esta ubicado gracias.

<ul class="nav nav-tabs" style="margin-bottom: 15px;">
  <li class="active"><a data-toggle="tab" href="#detallado"><span class="glyphicon glyphicon-list"></span>Detallado</a></li>
  <li><a data-toggle="tab" href="#diaSema"><span class="glyphicon glyphicon-list"></span>Dia Sema.</a></li>
  <li><a data-toggle="tab" href="#mes"><span class="glyphicon glyphicon-list"></span>Mes</a></li>
  <li><a data-toggle="tab" href="#ano"><span class="glyphicon glyphicon-list"></span>Año</a></li>
  <li><a data-toggle="tab" href="#local"><span class="glyphicon glyphicon-list"></span>Local</a></li>
</ul>

2
  • 1
    Hola, y ¿qué has intentado hasta ahora? Commented el 11 mar. 2019 a las 16:00
  • Buenas. Aun que veo que ya te han respondido de forma muy clara y eficaz, te aconsejo leer. Cómo preguntar y ejemplo mínimo verificable para que la próxima pregunta sea un poquito mas acorde a lo que se solicita en SO. Un saludo. :D Commented el 11 mar. 2019 a las 17:02

2 respuestas 2

3

puedes usar el evento onclick que se invoque al presionar ('a[data-toggle="tab"]') ,dentro del evento obtienes el contenido del elemento actual para ser mostrado. incluir jquery

ejemplo:

$('a[data-toggle="tab"]').on('click', function (e) {
  var contenido = $(this).html();
  alert(contenido);
});
1
  • Gracias me sirvio mucho
    – PANGALLETA
    Commented el 11 mar. 2019 a las 16:17
0

Esta es una manera de marcar tu tab seleccionado, ya solo es cuestion de que juegues con desactivar los seleccionados anteriormente.

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>
<html>
  <head>
    <script type='text/javascript' src='js/jquery-1.3.2.js'></script>
    <script type='text/javascript'>
$.fn.extend({
  Select: function() {
    return $(this).addClass('mySelected');
  },
  Unselect: function() {
    return $(this).removeClass('mySelected');
  },
  MyApplication: {
    Ready: function() {
      $('p').click(
        function($e) {
          $('li').Select();
        }
      );
      $('li').click(
        function() {
          $(this).hasClass('mySelected')?$(this).Unselect() : $(this).Select();   
        }
      );
    }
  }
});

$(document).ready(
  function() {
    $.fn.MyApplication.Ready();
  }
);
    </script>
    <style type='text/css'>
li.mySelected {
    background: yellow;
}
    </style>
  </head>
  <body>
  
    <ul class="nav nav-tabs" style="margin-bottom: 15px;">
  <li class="active"><a data-toggle="tab" href="#detallado"><span class="glyphicon glyphicon-list"></span>Detallado</a></li>
  <li><a data-toggle="tab" href="#diaSema"><span class="glyphicon glyphicon-list"></span>Dia Sema.</a></li>
  <li><a data-toggle="tab" href="#mes"><span class="glyphicon glyphicon-list"></span>Mes</a></li>
  <li><a data-toggle="tab" href="#ano"><span class="glyphicon glyphicon-list"></span>Año</a></li>
  <li><a data-toggle="tab" href="#local"><span class="glyphicon glyphicon-list"></span>Local</a></li>
</ul>
  </body>
</html>

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.