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

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

<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? Или лучше дать двум ссылкам id и как-то задать там свойства цвета? Как мне это сделать?


javascript jquery css onclick
person Teslar    schedule 22.04.2011    source источник

Ответы (6)


arrow_upward
9
arrow_downward

JQUERY:

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

HTML-РАЗМЕТКА:

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

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

CSS:

a.link.active { color:blue; }

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

person daryl    schedule 22.04.2011

arrow_upward
3
arrow_downward

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 вашими именами классов.

person Demian Brecht    schedule 22.04.2011

arrow_upward
2
arrow_downward

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

       <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>
person Akshay Raut    schedule 24.08.2012

arrow_upward
0
arrow_downward

Ваш цвет 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.

person David says reinstate Monica    schedule 22.04.2011

arrow_upward
0
arrow_downward

Создайте 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');

});
person Marc Bouvier    schedule 22.04.2011

arrow_upward
0
arrow_downward

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

person Sachin Nayak    schedule 22.04.2011