Меню JQuery: изменение цвета ссылки при нажатии

Я пытаюсь сделать код, который позволяет мне щелкнуть ссылку на моей навигационной строке, а затем она изменит цвет, когда я нажму другую ссылку, цвет изменится и новая ссылка получит цвет вместо этого! Однако что-то кажется, что случилось с моим кодом; (Может кто-нибудь мне помочь :)Меню JQuery: изменение цвета ссылки при нажатии

Это в моем try_1.php файле:

<!doctype html> 
<html lang="en"> 
<head> 
    <meta charset="utf-8" /> 

     <link rel="stylesheet" href="try_1.css"> 
     <script type="text/javascript" src="js/jquery.js"></script> 
      <script type="text/javascript" src="js/click.js"></script> 
</head> 
    <body> 
     <div id="header"> 
     <div id="mainNavMenu"> 
      <ul> 
       <li><a href="#">Hjem</a></li> 
       <li><a href="#">CV</a></li> 
       <li><a href="#">Foto album</a></li> 
       <li><a href="#">Pr&aelig;diker</a></li> 
       <li><a href="#">Artikler</a></li> 
       <li><a href="#">Foredrag</a></li> 
       <li><a href="#">Kalender</a></li> 
       <li><a href="#">Kontakt</a></li> 
      </ul> 
     </div> 
     </div> 
    </body> 
</html>

Это в моем try_1.css файле:

a:link,a:visited{ 
    color:green; 
    font-family:calibri; 
    text-decoration:none; 
} 
#mainNavMenu ul li { 
    float:left; 
    list-style-type:none; 
} 
#mainNavMenu ul li a:link{ 
    color:blue; 
    font-size:18px; 
    padding-right:20px; 
    padding-left:20px; 
    line-height:60px;' 
    text-decoration:none; 
    display:block; 
    background:gray; 
} 
#mainNavMenu ul li a:hover{ 
    color:yellow; 
} 

#mainNavMenu .changeColor{ 
    background-color:white; 
}

Это в моем click.js файле:

$(document).ready(function(){ 

       var targetElement = $("#mainNavMenu li"); 

       targetElement.click(function() { 
        $(this).addClass("changeColor"); 
       }); 

      });

И, конечно, у меня тоже есть jquery.js файл, но не собираюсь копировать/вставить ю в коде :)

Надежда у ребят может помочь :)

источник

2013-01-09 user1958149

Попробуйте это: .siblings() будет полезен в вашем случае.

$(document).ready(function(){ 
    var targetElement = $("#mainNavMenu li");   
    targetElement.click(function() { 
     $(this).siblings().removeClass("changeColor"); 
     $(this).addClass("changeColor"); 
    }); 
});

источник

2013-01-09 12:09:44 Jai

Ну, он сказал, что я не собираюсь копировать & вставьте код: D +1 для ответа. –

это должно сделать ..

#mainNavMenu ul li.changeColor{ 
background-color:white;

}

, так как ваш добавляете класс <li> здесь ... $(this) в вашем JQuery относится к <li> ..

источник

2013-01-09 12:09:56 bipen

Попробуй вот так.

$(document).ready(function(){ 
    var targetElement = $("#mainNavMenu li"); 
    targetElement.click(function() { 
     targetElement.removeClass('changeColor'); 
     $(this).addClass("changeColor"); 
    }); 
});

источник

2013-01-09 12:11:10 Vins

Вы подаете в background: gray стиль Вашей <a/> гиперссылок в #mainNavMenu ul li a:link правила. Но вы применяете имя класса changeColor к родительским элементам <li/>.

background стиль применяется к <li/> будут перезаписаны background стиля в ребенке <a/> всегда заканчивающегося в gray.

Вместо этого вам необходимо применить свое правило к гиперссылкам. Следующее правило немного чересчур многословно, но я думаю, что он получил эту идею.

Использование

#mainNavMenu ul li a:link.changeColor { 
    background-color:white; 
}

вместо

#mainNavMenu .changeColor{ 
    background-color:white; 
}

и обновить текущий селектор в вашем коде.

$(function(){ 
    var $targetElement = $("#mainNavMenu li a");   
    $targetElement.click(function() { 
     $targetElement.removeClass("changeColor"); 
     $(this).addClass("changeColor"); 
    }); 
});

See a live example.

источник

2013-01-09 12:22:38 Alexander

<script type="text/javascript"> 
    $(document).ready(function() { 
     jQuery('.menu a').click(function() {. 
      jQuery('.menu a').removeClass('select'); 
      jQuery(this).addClass('select'); 

     }); 
    }); 

</script> 
<nav class="menu"> 
    <a href="#" class="select">all</a> 
    <a href="#" ">shoes</a> 
    <a href="#" ">dress</a> 
    <a href="#" ">hat</a> 
    <a href="#" ">trousers</a> 
    <a href="#" ">shirt</a> 

</nav>

ПОМНИТЕ: Установка свойств в CSS включают в себя:
:: Выбор
{
цвет: #fff;
фон: # ed1e79;
text-shadow: нет;
}
:: - Мос-селекции // это свойство необходимо для Mozila FIREFOX
{
цвета: #fff;
фон: # ed1e79;
text-shadow: нет;
}

я думаю, что метод очень простой рабочий, и вы можете легко понимание

Примечания: когда вы заставляете кого-то пусть это руководство легко и наиболее кратким

источник

2016-09-08 04:43:23

Меню JQuery: изменение цвета ссылки при нажатии

ответ

Смежные вопросы