¿Cómo resaltar la pestaña seleccionada?

Tengo un set de tabs en html que quiero resaltar cuando se seleccionan. Estoy tratando de usar jquery para hacer esto. pero no parece funcionar.

$(function () { setNavigation(); }); function setNavigation() { var path = window.location.pathname; path = path.replace(/\/$/, ""); path = decodeURIComponent(path); $(".nav a").each(function () { var href = $(this).attr('href'); if (path.substring(0, href.length) === href) { $(this).closest('li').addClass('active'); } }); } 
 a { color:#000; text-decoration:none; } a:hover { text-decoration:underline; } a:visited { color:#000; } .nav { padding:10px; border:solid 1px #c0c0c0; border-radius:5px; float:left; } .nav li { list-style-type:none; float:left; margin:0 10px; } .nav li a { text-align:center; width:55px; float:left; } .nav li.active { background-color:green; } .nav li.active a { color:#fff; font-weight:bold; } 
 <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script> <ul class="nav"> <li><a href="#tab1">tab1</a> </li> <li>|</li> <li><a href="#tab2">tab2</a> </li> <li>|</li> <li><a href="#tab3">tab3</a> </li> <li>|</li> <li><a href="#tab4">tab4</a> </li> </ul> 

Eso es factible con un evento de clic:

 $(document).on("click", 'ul li', function(){ $('ul li').removeClass('active'); $(this).addClass('active'); }); 
 a { color:#000; text-decoration:none; } a:hover { text-decoration:underline; } a:visited { color:#000; } .nav { padding:10px; border:solid 1px #c0c0c0; border-radius:5px; float:left; } .nav li { list-style-type:none; float:left; margin:0 10px; } .nav li a { text-align:center; width:55px; float:left; } .nav li.active { background-color:green; } .nav li.active a { color:#fff; font-weight:bold; } 
 <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script> <ul class="nav"> <li><a href="#tab1">tab1</a> </li> <li>|</li> <li><a href="#tab2">tab2</a> </li> <li>|</li> <li><a href="#tab3">tab3</a> </li> <li>|</li> <li><a href="#tab4">tab4</a> </li> </ul> 

Agregue una class de operador que defina qué pestaña está activa / presionada.

HTML

 <ul class="nav"> <li><a href="#tab1" class="active">tab1</a> </li> <li>|</li> <li><a href="#tab2">tab2</a> </li> <li>|</li> <li><a href="#tab3">tab3</a> </li> <li>|</li> <li><a href="#tab4">tab4</a> </li> </ul> 

Estílo en CSS y luego haga un clic en su Javascript / jQuery que se ve de la siguiente manera:

 $(document).ready(function(){ $(".nav").on("click", "li", function(){ $(".active").removeClass("active"); $(this).addClass("active"); }) }) 

http://jsfiddle.net/scriptonic/pgw8qq9a/3/

Esto es todo el jQuery / javascript que necesitas:

 $('.nav a').click(function() { // Hook up to the click event on your .nav anchors $('.nav li').removeClass('active'); // Clear any existing active <li>'s $(this).parent().addClass('active'); // Apply the active class to the <li> parent of the clicked <a> }); 

Esto es más o less lo mismo que otro (solo un chico, solo habría agregado un comentario, pero no tengo puntos de reputación. De hecho, es negativo), pero un poco más específico para la class .nav, así que no estás agregando events a todos los elementos ul li, pero solo a los que están bajo tu class .nav.

También podría hacerlo con on, si sus tabs son algo más que estática …

 $(".nav li a").click(function() { $(".nav li").removeClass("active"); $(this).parent().addClass("active"); }); 

http://jsfiddle.net/pgw8qq9a/9/

 $(function () { setNavigation(); }); function setNavigation() { var path = window.location.pathname; path = path.replace(/\/$/, ""); path = decodeURIComponent(path); $(".nav a").each(function () { var href = $(this).attr('href'); if (path.substring(0, href.length) === href) { $(this).closest('li').addClass('active'); } }); } 
 a { color:#000; text-decoration:none; } a:hover { text-decoration:underline; } a:visited { color:#000; } .nav { padding:10px; border:solid 1px #c0c0c0; border-radius:5px; float:left; } .nav li { list-style-type:none; float:left; margin:0 10px; } .nav li a { text-align:center; width:55px; float:left; } .nav li.active { background-color:green; } .nav li.active a { color:#fff; font-weight:bold; } 
 <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script> <ul class="nav"> <li><a href="#tab1">tab1</a> </li> <li>|</li> <li><a href="#tab2">tab2</a> </li> <li>|</li> <li><a href="#tab3">tab3</a> </li> <li>|</li> <li><a href="#tab4">tab4</a> </li> </ul> 

html:

 <ul class="nav"> <li><a onclick="add_select(this);" href="#tab1">tab1</a> </li> <li>|</li> <li><a onclick="add_select(this);" href="#tab2">tab2</a> </li> <li>|</li> <li><a onclick="add_select(this);" href="#tab3">tab3</a> </li> <li>|</li> <li><a onclick="add_select(this);" href="#tab4">tab4</a> </li> </ul> 

jquery:

 function add_select(selected_nav){ $("ul#nav li a").removeClass("active"); $(selected_nav).addClass("active"); }