Изменить свойство CSS Link onClick с помощью Javascript / JQuery?

Question

Так, например, у меня есть две ссылки:

<a onClick="doColorChange()">Link 1</a>
<a onClick="doColorChange()">Link 2</a>

Я хочу, чтобы при нажатии на ссылку 1 ссылка 1 изменяла цвет на синий для обозначения выбранного, а ссылка 2 оставалась черной. Когда пользователь щелкает ссылку 2, ссылка 2 меняет цвет на синий, а ссылка 1 меняет цвет на белый.

В настоящее время у меня есть свойство CSS по умолчанию для ссылок:

a:link {
   color: #green;
}

Я не уверен в наилучшем способе обработки функции doColorChange (). Лучше всего создать два CSS-класса для двух цветов, а затем переключить их с помощью doColorChange? Или лучше дать двум ссылкам идентификатор и каким-то образом установить там цветовые свойства? Как мне это сделать?

Answer 1

JQUERY:

$(function() {
   var links = $('a.link').click(function() {
       links.removeClass('active');
       $(this).addClass('active');
   });
});

HTML MARKUP:

<a href="#" class="link">Link 1</a>
<a href="#" class="link">Link 2</a>

Я предлагаю добавить класс к ссылкам, таким образом, этопроще.

CSS:

a.link.active { color:blue; }

Добавлена ​​живая версия (скрипка): http://jsfiddle.net/gHb9F/

Answer 2

HTML

<a href="#">Link 1</a>
<a href="#">Link 2</a>

Скрипт (с использованием jQuery)

$(document).ready(function(){
    $('a').click(function(){
        $('a').css('color', 'black');
        $(this).css('color', 'blue');
    });
});

CSS

a:link { color: black; }
a:visited { color: black; }

Скрипка здесь

Примечание: Изменение цвета будет применено к всем токам якоря натвоя страница.Если вы хотите ограничить его несколькими избранными, поместите их в класс и добавьте этот класс в селектор.

Редактировать:

Если вы планируете это сделатьчто-нибудь кроме простого обмена цветом, тогда классы - определенно путь (просто замените .css вызовы .addClass и .removeClass на ваши собственные имена классов.

Answer 3

Попробуйте этот код.Я нашел его простым в использовании.

       <script type="text/javascript">
            var currentLink = null;
            function changeLinkColor(link){
                if(currentLink!=null){
                    currentLink.style.color = link.style.color; //You may put any color you want
                }
                link.style.color = 'blue';
                currentLink = link;
            }
       </script>

       <a onClick="changeLinkColor(this)">Link 1</a>
       <a onClick="changeLinkColor(this)">Link 2</a>

Answer 4

Создайте 2 разных класса в css и затем поменяйте их местами по ссылкам, когда вы нажмете на ссылку.CSS

a.link{
   color : green;
}

a.selected{
   color : black;
}

Javascript

jQuery(a).click(function()
{

   jQuery('a.selected').addClass('link');
   jQuery('a.selected').removeClass('selected');
   jQuery(this).removeClass('link');
   jQuery(this).addClass('selected');

});

Answer 5

Ваш цвет CSS по умолчанию для ссылок должен быть:

a:link {
    color: #0f0; /* or
    color: green;
    color: rgb(0,255,0);
}

В противном случае, используя jQuery, вы можете достичь этого с помощью:

$('a').click(
    function(){
        $('.selectedLink').removeClass('selectedLink');
        $(this).addClass('selectedLink');
        return false
    });

В сочетании с CSS:

.selectedLink {
    color: #00f;
}

JS Fiddle demo .

Answer 6

предоставление элементов классам css было бы лучшим вариантом.Вы можете сделать это, используя свойство className объекта.в doCOlorChange вы можете написать this.className ="newclassName";

Answer 7

var doColorChange=function(){ this.style.color="blue";}