Как изменить цвет элемента навигации, когда он будет активен?

Question

Мой стиль CSS У меня есть

#nav { 
    position: relative; 

} 

и HTML-код

<div class="header-background"> 
     <!-- <div> --> 
     <div id="logo">Site Title</div> 

     <div id="nav"> 
       <nav id="desktop-nav"> 
      <a class="nav-item" href="#1">about</a> 
      <a class="nav-item" href="#2">news</a> 
      <a class="nav-item" href="#3">Community</a> 
      <a class="nav-item" href="#4">Docs</a> 
      </nav> 

    </div> 

здесь я имею о, новости, сообщество, документы эти 4 field..I хотите, когда я нажимаю на любую кнопку предположим, что " о» того времени „о“ кнопке изменении цвета в желтых и других кнопок цвета текста будет белого ... Итак, я использую JQuery

$(".desktop-nav a").live("click",function(){ 
    $(".desktop-nav a").removeClass("active"); 
     $(this).addClass("active"); 
    }); 

, но цвет не changing..guys предложить мне что-то ..

Answer 1

Просто, как фигу предложил: Используйте правильный селектор.

Кроме того, вы можете использовать функцию jQuery .siblings(), чтобы сделать ваш код более общим.

$("#desktop-nav").on("click", 'a', function(){ 
    $(this).addClass("active").siblings().removeClass("active"); 
}); 

Answer 2

Ваш jQuery код не работает, потому что это не очень хорошо предвещал с HTML. У вас, похоже, неправильный выбор jQuery.

Итак, я хотел бы предложить несколько изменений:

Первое изменение:nav элемент имеет идентификатор desktop-nav. Ваш метод jQuery ищет класс с именем desktop-nav. Это может быть опечатка.

Второе изменение: как указано ранее live Метод устарел. Вы можете использовать метод on() или click(). В моем примере я использовал метод click().

Если вы сделаете первый смену, вы должны работать, заменив .desktop-nav на #desktop-nav в jQuery.

Второе изменение обеспечит соблюдение лучших проакций.

См код работает ниже:

$("#desktop-nav a").click(function(){ 
 
    $("#desktop-nav a").removeClass("active"); 
 
    $(this).addClass("active"); 
 
});

#nav { 
 
    position: relative; 
 
    display: block; 
 
    height: 55px; 
 
    line-height: 55px; 
 
    width: 100%; 
 
    max-width: none; 
 
    margin: 0; 
 
    background: #333; 
 
    z-index: 1; 
 
    border-bottom: 1px solid #666; 
 
    font-weight: 600; 
 
    font-family: helvetica, arial, sans-serif; 
 
    font-size: 14px; 
 
    -webkit-box-align:center; 
 
    -webkit-box-pack:center; 
 
    display:-webkit-box; 
 
} 
 
#nav, #nav * { 
 
    -webkit-box-sizing: border-box; 
 
    /* Safari/Chrome, other WebKit */ 
 
    -moz-box-sizing: border-box; 
 
    /* Firefox, other Gecko */ 
 
    box-sizing: border-box; 
 
    /* Opera/IE 8+ */ 
 
} 
 
.nav-item { 
 
    color: #fff; 
 
    text-transform: uppercase; 
 
    text-decoration: none; 
 
} 
 
a.active { 
 
    color: #82b965; 
 
} 
 
/* Desktop */ 
 
#desktop-nav .nav-item { 
 
    display: block; 
 
    padding: 0 20px; 
 
    float: right; 
 
    -webkit-transition: color 200ms linear; 
 
    -moz-transition: color 200ms linear; 
 
    -ms-transition: color 200ms linear; 
 
    -o-transition: color 200ms linear; 
 
    transition: color 200ms linear; 
 
} 
 
#desktop-nav .nav-item:hover, #desktop-nav .nav-item:active { 
 
    opacity: 0.7; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script> 
 
<div class="header-background"> 
 
    <!-- <div> --> 
 
    <div id="logo">Site Title</div> 
 
    <div id="nav"> 
 
     <nav id="desktop-nav"> 
 
      <a class="nav-item" href="#1">about</a> 
 
      <a class="nav-item" href="#2">news</a> 
 
      <a class="nav-item" href="#3">Community</a> 
 
      <a class="nav-item" href="#4">Docs</a> 
 
     </nav> 
 
</div>

Answer 3

По JQuery 1.7, метод .live() является устаревшим. Используйте .on() для присоединения обработчиков событий.

В соответствии с вашим кодом HTML, тег nav имеет идентификатор не класса.

вот рабочий код:

$("#desktop-nav a").on("click", function(){ 
    $("#desktop-nav a").removeClass("active"); 
     $(this).addClass("active"); 
});