измените цвет ссылки

#jquery #css

Вопрос:

Если у меня есть 5 ссылок.Сначала, если я нажимаю на ссылку, она должна измениться на какой-то другой цвет, а затем, если я нажимаю на другую ссылку, предыдущий цвет ссылки должен стать стандартным, и этот цвет ссылки должен измениться

код:

 $("table#menu tr > td a[href^='#']").click(function() { 
     $(this).toggleClass('class1'); / 
}); 

a.class1 { color:#000000; } 

<table id="menu"> 
<tr> 
   <td><a href="#" id="link1">qwerty</a></td> 
</tr> <tr> 
   <td><a href="#" id="link1">zyz</a></td> 
</tr> 
</table>

1. вам придется сделать это вручную, подключив события нажатия. если вы сможете показать нам свою разметку и требования, мы сможем лучше помочь

2. @nEEbz:$(«таблица#меню tr > td a[href^=’#’]»).щелкните(функция() { $(это). Переключить класс(‘class1’); / }); a.class1 { цвет:#000000; } <идентификатор таблицы=»меню»> <tr> <td><a href=»#» id=»link1″>qwerty</a></td> </tr> <tr> <td><a href=»#» id=»link1″>zyz</a></td> </tr> </таблица>

3. После вызова toggleClass появляется косая черта / . Это опечатка?

Ответ №1:

Классы.

css:

 a {
    color: green;
}
a.special {
    color: orange;
}

javascript:

 $('a').click(function(evt) {
    evt.preventDefault(); //don't follow link
    //remove the special class from all links which already have it
    $('a.special').removeClass('special');
    //add the special classs to the clicked link
    $(this).addClass('special');
}

Конечно, вы должны изменить селекторы в соответствии с вашим html.

Живой пример:http://jsfiddle.net/KHjDr /

Ответ №2:

Это должно ответить на ваш вопрос:

http://jsfiddle.net/TL9rh/

HTML

 <div id="links">
    <a href="#">link1</a>
    <a href="#">link2</a>
    <a href="#">link3</a>
    <a href="#">link4</a>
    <a href="#">link5</a>
</div>

javascript

 $(document).ready(function(){
    $('#links a').click(function(){
        $(this).addClass('selected');
        $(this).siblings().removeClass('selected');
    });
})

css

 a {
    color: darkgreen;   
}


.selected {
     color: red;   
}

1. если у меня есть таблица, и у каждого td есть ссылка. Как бы я это сделал?

2. можете ли вы изменить свои стили, добавив некоторый идентификатор, который создает проблему bcoz global здесь.

Ответ №3:

Если страница, содержащая ваши ссылки, не обновляется, вы можете сделать это только с помощью CSS.

HTML

 <a href="#">MyLink1</a>
<a href="#">MyLink2</a>
<a href="#">MyLink3</a>

CSS

 a:link{color: blue;}
a:active{color: red;}

Ответ №4:

Правильная версия будет для jQuery:

 $(document).ready(function(){
$('.win a').click(function(){
    $('.win a:first-child').removeClass('focused');
    $(this).addClass('focused');

});

})

и Html-:

 <li class="widget-title win"><a class="focused" href="#window1">Recent News</a></li>
<li class="widget-title win"><a href="#window2">Most Favorites</a></li>
<li class="widget-title win"><a  href="#window3">Top News</a></li>