Navbar com ancoras

[JoaoRafael213 0]

Boa noite, estou usando um navbar para linkar as ancoras da minha pagina web da seguinte forma:

 

<ul class="nav navbar-nav navbar-right">
<li class="active">
<a href="#home">Home</a>
</li>
<li>
<a href="#service">Serviços</a>
</li>
<li>
<a href="#technologies">Tecnologias</a>
</li>
<li>
<a href="#contact">Contato</a>
</li>
</ul>

 

e o problema é o seguinte, quando eu clico no link "Serviço" eu gostaria que ele ficase ativo com class="active" porque do jeito que esta somente a "Home" que ficara como ativo independente do link que eu clicar, mais não sei como fazer este tratamento já que os links são ancoras para a mesma pagina.

 

Alguém pode me dar uma luz?

 

Tem alguma forma de resolver isto com jquery?

[wilnet 92]

Olá João, blza!

 

Não sei como está seu CSS, mas vc deve por sua Class="active" em cada página que corresponde seu menu.

 

Exemplo:

 

CSS

#menu ul{
  background:#06C;
  height:48px;
  line-height:40px;
  }

#menu ul li{display:inline;}

#menu ul li a{
  float:left;
  padding:4px 15px;
  border-right:1px solid #8BAD25;
  color:#FFF;
  text-decoration:none;
  font-weight:bold;
  }

#menu ul li a:hover{background:#09C;}

#menu ul li a.on{ background:#9CF;color:#FFF;}

HOME

<div id="menu">
        <ul>
          <li><a href="home.html" class="on">Home</a></li>
          <li><a href="servicos.html">Serviços</a></li>
          <li><a href="technologies.html">Tecnologias</a></li>
          <li><a href="contact.html">Contato</a></li>
        </ul>
</div>

Serviços

<div id="menu">
        <ul>
          <li><a href="home.html" >Home</a></li>
          <li><a href="servicos.html" class="on">Serviços</a></li>
          <li><a href="technologies.html">Tecnologias</a></li>
          <li><a href="contact.html">Contato</a></li>
        </ul>
</div>

E assim vc faz para as demais páginas.

 

Desta forma, em cada página que estiver clicada, irá mantes os efeitos do CSS pela class="on".

 

Agora é só adaptar para suas necessidades.

 

 

 

Espero ter ajudado,

 

vlw

[reebr 94]

Utilizando as funções addClass e removeClass você pode manipular qual elemento deve receber a classe "active".

<nav>
    <a href="#a" class="active">#A</a>
    <a href="#b">#B</a>
</nav>

<div id="a"></div>
<div id="b"></div>

$(function(){
   var current = $("nav > a"); // pega o primeiro elemento do menu.
      
   $("nav a").on("click", function(){
          $(current).removeClass("active"); // remove a classe do elemento atual
          current = $(this);
          $(current).addClass("active");
   });
});

http://jsfiddle.net/rnxn/tojx866u/

[JoaoRafael213 0]

Boa tarde rnxn, utilizei o código que vc me mandou, mais deu errado, acho que é na hora de incluir a navbar no "var current", vejá como esta o código do meu navbar:

<nav class="navbar navbar-default navbar-fixed-top" role="navigation">
	  <div class="container">
		<div class="navbar-header">
			 <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1"> <span class="sr-only">Navegação</span><span class="icon-bar"></span><span class="icon-bar"></span><span class="icon-bar"></span></button> <a class="navbar-brand" href="#perf">João Raphael</a>
		</div>
		
		<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
			<ul class="nav navbar-nav navbar-right">
				<li  class="active">
					<a href="#home">Home</a>
				</li>
				<li>
					<a href="#service">Serviços</a>
				</li>
				<li>
					<a href="#technologies">Tecnologias</a>
				</li>
				<li>
					<a href="#contact">Contato</a>
				</li>
				
			</ul>
		</div>
	  </div>		
	</nav>

como que devo incluir ela na variavel current?

[wilnet 92]

Vc chegou a testar o exemplo que passei com base no seu exemplo?

[reebr 94]

Como você está inserindo a "active" no <li> :

var current = $(".nav > li");

[JoaoRafael213 0]

Opa, manow estou quebrando a cabeça aki...

Testei o código mais não consegui colocar para rodar, ele esta deste jeito:

$(function(){
     var current = $(".nav > li"); // pega o primeiro elemento do menu.
   $(".nav li").on("click", function(){
   $(current).removeClass("active"); // remove a classe do elemento atual
     current = $(this);
   $(current).addClass("active");
   });
});

Tem alguma coisa errada nele?

[carneirinho 7]

Você adiciou o jquery?

[JoaoRafael213 0]

sim, os demais recurso do jquery estão funcionando corretamente.

 

Att.