0

Buenas.
Estoy intentado poner pestañas con bootstrap a mi página web. El problema es que no sé como hacer para que el foco se ponga en la pestaña en la que se ha hecho click. Por foco me refiero a que se vea cual es la que está seleccionada (la pestaña de color rojo en esto caso). He estado buscando en internet y no he encontrado nada que me haya sido útil.

Adjunto foto de la web con las pestañas y código:

El foco en la foto estaría en Albums.

introducir la descripción de la imagen aquí



CÓDIGO:

			$(document).ready(function(){
				$('.carousel').carousel();
				var altura = $('.menu').offset().top;
				$(window).on('scroll',function(){
					if ( $(window).scrollTop() > altura ){
						$('.menu').addClass('menu-fixed');
					} else {
						$('.menu').removeClass('menu-fixed');
					}
				});
				$("#news").mouseover(function(){
					$("#news").css("background-color", "#800000");
					$("#a").css("color",black);
				});
				
				$("#conciertos").mouseover(function(){
					$("#conciertos").css("background-color", "#800000");
				});			
				
				$("#videos").mouseover(function(){
					$("#videos").css("background-color", "#800000");
				});
				
				$("#songs").mouseover(function(){
					$("#songs").css("background-color", "#800000");
				});				

				$("#lyrics").mouseover(function(){
					$("#lyrics").css("background-color", "#800000");
				});
				
				$("#store").mouseover(function(){
					$("#store").css("background-color", "#800000");
				});
				
				$(".listaArriba").mouseleave(function(){
					$(".listaArriba").css("background-color","#B22222");
				});
				
				$("#albumPill").click(function(){
					$("#albums").show();
					$("#singles").hide();
				});
				
				$("#singlePill").click(function(){
					$("#singles").show();
					$("#albums").hide();
				});
				$("#singles").hide();
				
			});
		<header class="headerEnd">
		<div class = "cabecera">
			<ul id = "lista1">
				<a href="home.html" id="fotoEndi"><img src="endikasangroniz.png" id=titulua></a>
				<a href="../EndiIngles/endi.html" id = "o"><img src="../Bandera/uk.png"></a>
				<a href="../EndiCastellano/endi.html"><img src="../Bandera/banderaEspana.png"></a>
				<a href="../EndiEuskera/endi.html"><img src="../Bandera/ikurrina.png"></					
   				</ul>
   			</div>
	</header>
	<header class = "header">
		<div class="menu" id="menu">
			<nav class="top-menu">
				<ul class = "navigation">
					<li class="listaArriba" id="news"><a href="news.html">NEWS</a></li>
					<li class="listaArriba" id="conciertos"><a href="gigs.html">GIGS</a></li>
					<li class="listaArriba" id="videos"><a href="videos.html">VIDEOS</a></li>
					<li class="listaArriba" id="songs"><a href="music.html">MUSIC</a></li>
					<li class="listaArriba" id="lyrics"><a href="lyrics.html">LYRICS</a></li>
					<li class="listaArriba" id="store"><a href="https://endikasangroniz.bandcamp.com/" target="_blank">STORE</a></li>
				</ul>
			</nav>
		</div>
   		</header>   		
   			<div class="lyrics">
   				<!-- Centered Pills -->
   				<ul class="nav nav-pills nav-justified">
   				  <li class="active" id="albumPill"><a href="#">Albums</a></li>
   				  <li id="singlePill""><a href="#">Singles</a></li>
			</ul>
			<div id="albums">
				<h3>Aquí saldrían los albumes</h3>
			</div>			
			<div id="singles">
				<h3>Aquí saldrían los singles</h3>
			</div>
		</div>
					<div id="footer">
				<ul class = "navigationFoot">
					<a id="n" href="https://es-es.facebook.com/EndikaSangroniz/" target="_blank"><img src="../IconosRedes/iconoFacebook.png" ></a>
					<a id="n" href="https://www.instagram.com/endikasangroniz/?hl=es" target="_blank"><img src="../IconosRedes/iconoInsta.png"></a>
					<a id="n" href="https://endikasangroniz.bandcamp.com/" target="_blank"><img id="soundcloud" src="../IconosRedes/bandcamp.png"></a>
				</ul>
		</div>

PD: He omitido el código CSS porque no es relevante aquí. Saludos.

1 respuesta 1

1

No tienes más que establecer la clase active en la pestaña que quieres que se vea como activa:

  $(document).ready(function(){
    $('.carousel').carousel();
    var altura = $('.menu').offset().top;
    $(window).on('scroll',function(){
      if ( $(window).scrollTop() > altura ){
        $('.menu').addClass('menu-fixed');
      } else {
        $('.menu').removeClass('menu-fixed');
      }
    });
    $("#news").mouseover(function(){
      $("#news").css("background-color", "#800000");
      $("#a").css("color", 'black');
    });

    $("#conciertos").mouseover(function(){
      $("#conciertos").css("background-color", "#800000");
    });			

    $("#videos").mouseover(function(){
      $("#videos").css("background-color", "#800000");
    });

    $("#songs").mouseover(function(){
      $("#songs").css("background-color", "#800000");
    });				

    $("#lyrics").mouseover(function(){
      $("#lyrics").css("background-color", "#800000");
    });

    $("#store").mouseover(function(){
      $("#store").css("background-color", "#800000");
    });

    $(".listaArriba").mouseleave(function(){
      $(".listaArriba").css("background-color","#B22222");
    });

    $("#albumPill").click(function(){
      $("#albums").show();
      $("#singles").hide();
      $(".nav.nav-pills li").removeClass("active");
      $("#albumPill").addClass("active");
    });

    $("#singlePill").click(function(){
      $("#singles").show();
      $("#albums").hide();
      $(".nav.nav-pills li").removeClass("active");
      $("#singlePill").addClass("active");
    });
    $("#singles").hide();

  });
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>

<header class="headerEnd">
		<div class = "cabecera">
			<ul id = "lista1">
				<a href="home.html" id="fotoEndi"><img src="endikasangroniz.png" id=titulua></a>
				<a href="../EndiIngles/endi.html" id = "o"><img src="../Bandera/uk.png"></a>
				<a href="../EndiCastellano/endi.html"><img src="../Bandera/banderaEspana.png"></a>
				<a href="../EndiEuskera/endi.html"><img src="../Bandera/ikurrina.png"></a>					
      </ul>
    </div>
	</header>
	<header class = "header">
		<div class="menu" id="menu">
			<nav class="top-menu">
				<ul class = "navigation">
					<li class="listaArriba" id="news"><a href="news.html">NEWS</a></li>
					<li class="listaArriba" id="conciertos"><a href="gigs.html">GIGS</a></li>
					<li class="listaArriba" id="videos"><a href="videos.html">VIDEOS</a></li>
					<li class="listaArriba" id="songs"><a href="music.html">MUSIC</a></li>
					<li class="listaArriba" id="lyrics"><a href="lyrics.html">LYRICS</a></li>
					<li class="listaArriba" id="store"><a href="https://endikasangroniz.bandcamp.com/" target="_blank">STORE</a></li>
				</ul>
			</nav>
		</div>
   		</header>   		
   			<div class="lyrics">
   				<!-- Centered Pills -->
   				<ul class="nav nav-pills nav-justified">
   				  <li id="albumPill" class="active"><a href="#">Albums</a></li>
   				  <li id="singlePill"><a href="#">Singles</a></li>
			</ul>
			<div id="albums">
				<h3>Aquí saldrían los albumes</h3>
			</div>			
			<div id="singles">
				<h3>Aquí saldrían los singles</h3>
			</div>
		</div>
					<div id="footer">
				<ul class = "navigationFoot">
					<a id="n" href="https://es-es.facebook.com/EndikaSangroniz/" target="_blank"><img src="../IconosRedes/iconoFacebook.png" ></a>
					<a id="n" href="https://www.instagram.com/endikasangroniz/?hl=es" target="_blank"><img src="../IconosRedes/iconoInsta.png"></a>
					<a id="n" href="https://endikasangroniz.bandcamp.com/" target="_blank"><img id="soundcloud" src="../IconosRedes/bandcamp.png"></a>
				</ul>
		</div>

1
  • Ha funcionado! Gracias Asier. Commented el 9 nov. 2017 a las 13:10

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.