2

eu tenho 3 links o home que é primeiro ja estar com a class="active" como faço para quando eu clicar no proximo link o mesmo fique ativo com a class="active" e desative os demais.

.navbar-menu {    
    display: flex;
    justify-content: center;
    align-items: baseline;
    width: 30%;
    background-color: black;
}   
.navbar-menu:hover {
    display: flex;
    justify-content: center;
    align-items: baseline;
    width: 30%;
}
ul {
    list-style-type: none;
    margin: 0px; 
    padding: 0; 
    width: 100%;
    overflow: hidden;
    background-color: black;
}
li a {
    display: block;
    font-family: "CaviarDreams";
    color: white;
    text-align: center;
    padding: 12px 12px; 
    background-color:black ; 
}
li a:hover {
    color: white;
    text-decoration: none;
}
a {
    transition-timing-function: linear;
    transition: font-size 100ms;
}
a:hover {
    color: white;
    font-size: 20px;
}
li a.active {
    color: white;
    border-bottom: 4px solid #FCEE21;
    font-size: 20px;
}
li a:hover:not(.active) {
    color: white;
    font-size: 20px;
    border-bottom: 4px solid #FCEE21;
} 
<div id="navbar" class="nav" style="box-shadow: rgba(0, 0, 0, 0.5)">
   <div style="background-color: black; height: 10%; width: 100%;">
      <div class="navbar">
         <div style="flex-basis: 5%"></div>
         <div class="navbar-menu cortext2">
            <ul>
               <li>
                  <a class="active" href="#home">Home</a>
               </li>
            </ul>
         </div>
         <div class="navbar-menu cortext2">
            <ul>
               <li>
                  <a href="#quemsomos">Quem Somos</a>
               </li>
            </ul>
         </div>
         <div class="navbar-menu cortext2">
            <ul>
               <li>
                  <a href="#faleconosco">Fale Conosco</a>
               </li>
            </ul>
         </div>
         <div style="flex-basis: 5%"></div>
      </div>
   </div>
</div>
</div>

Cabeçalhos

1

2 Respostas 2

2

Também fiz uma opção com jQuery :D

ele adiciona a classe .active onde vc clica e remove dos irmão (.siblings)

$(".menu-item").click(function(event){
    event.preventDefault();
   $(this).addClass("active").siblings().removeClass("active");
});
.navbar-menu {    
    display: flex;
    justify-content: center;
    align-items: baseline;
    width: 30%;
    background-color: black;
}   
.navbar-menu:hover {
    display: flex;
    justify-content: center;
    align-items: baseline;
    width: 30%;
}
ul {
    list-style-type: none;
    margin: 0px; 
    padding: 0; 
    width: 100%;
    overflow: hidden;
    background-color: black;
}
li a {
    display: block;
    font-family: "CaviarDreams";
    color: white;
    text-align: center;
    padding: 12px 12px; 
    background-color:black ; 
}
li a:hover {
    color: white;
    text-decoration: none;
}
a {
    transition-timing-function: linear;
    transition: font-size 100ms;
}
a:hover {
    color: white;
    font-size: 20px;
}
li.active > a{
    color: white;
    border-bottom: 4px solid #FCEE21;
    font-size: 20px;
}
li a:hover:not(.active) {
    color: white;
    font-size: 20px;
    border-bottom: 4px solid #FCEE21;
} 
    <script src="https://code.jquery.com/jquery-3.2.1.min.js"></script>
    <div id="navbar" class="nav" style="box-shadow: rgba(0, 0, 0, 0.5)">
   <div style="background-color: black; height: 10%; width: 100%;">
      <div class="navbar">
         <div style="flex-basis: 5%"></div>
         <div class="navbar-menu cortext2">
            <ul>
               <li class="menu-item active">
                  <a href="#home">Home</a>
               </li>
               <li class="menu-item">
                  <a href="#quemsomos">Quem Somos</a>
               </li>
               <li class="menu-item">
                  <a href="#faleconosco">Fale Conosco</a>
               </li>
            </ul>
         </div>
         <div style="flex-basis: 5%"></div>
      </div>
   </div>
</div>

2
  • boa! sempre esqueço do .siblings() Commented 24/04/2018 às 14:33
  • @LeandroAngelo só tive que passar o estilo para o LI e resolveu com .siblings() rss, eu sei tb funcionou direitinho, tmj!
    – hugocsl
    Commented 24/04/2018 às 14:39
2

Você pode fazer via Jquery, como no exemplo abaixo.

$(document).ready(function(){
  $('.navbar a').on('click',function(){
    $('.navbar a').removeClass('active');
    $(this).toggleClass('active');
  });
});
.navbar-menu {    
    display: flex;
    justify-content: center;
    align-items: baseline;
    width: 30%;
    background-color: black;
}   
.navbar-menu:hover {
    display: flex;
    justify-content: center;
    align-items: baseline;
    width: 30%;
}
ul {
    list-style-type: none;
    margin: 0px; 
    padding: 0; 
    width: 100%;
    overflow: hidden;
    background-color: black;
}
li a {
    display: block;
    font-family: "CaviarDreams";
    color: white;
    text-align: center;
    padding: 12px 12px; 
    background-color:black ; 
}
li a:hover {
    color: white;
    text-decoration: none;
}
a {
    transition-timing-function: linear;
    transition: font-size 100ms;
}
a:hover {
    color: white;
    font-size: 20px;
}
li a.active {
    color: white;
    border-bottom: 4px solid #FCEE21;
    font-size: 20px;
}
li a:hover:not(.active) {
    color: white;
    font-size: 20px;
    border-bottom: 4px solid #FCEE21;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="navbar" class="nav" style="box-shadow: rgba(0, 0, 0, 0.5)">
   <div style="background-color: black; height: 10%; width: 100%;">
      <div class="navbar">
         <div style="flex-basis: 5%"></div>
         <div class="navbar-menu cortext2">
            <ul>
               <li>
                  <a class="active" href="#home">Home</a>
               </li>
            </ul>
         </div>
         <div class="navbar-menu cortext2">
            <ul>
               <li>
                  <a href="#quemsomos">Quem Somos</a>
               </li>
            </ul>
         </div>
         <div class="navbar-menu cortext2">
            <ul>
               <li>
                  <a href="#faleconosco">Fale Conosco</a>
               </li>
            </ul>
         </div>
         <div style="flex-basis: 5%"></div>
      </div>
   </div>
</div>
</div>

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .