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

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
    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

Al pulsar en “Publica tu respuesta”, muestras tu consentimiento a nuestros términos de servicio, política de privacidad y política de cookies

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