Форум

ami_moor · #1 (**permalink**) 16.12.2013, 19:10

Здравствуйте.
Подскажите пожалуйста...
Стоит такая задача, изменять цвет активной ссылки.

<style>
#block a{
    color: red;
    display: block;
}

#block a.act {
    color: green;
}
</style>
<div id="block">
<a>Привет</a>
<a>дорогие</a>
<a>друзья</a>
</div>
<script>
$('#block a').click(function(){
    $(this).toggleClass('act')
})
</script>

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

danik.js · #2 (**permalink**) 16.12.2013, 19:38

.siblings().removeClass('act')

Vlasenko Fedor · #3 (**permalink**) 16.12.2013, 19:39

<head>
    <meta http-equiv="content-type" content="text/html; charset=UTF-8">
    <title>- jsFiddle demo by vlasenkofedor</title>
    <script type='text/javascript' src='http://code.jquery.com/jquery-1.9.1.js'></script>
    <style type='text/css'>
      #block a {
        color: red;
        display: block;
      }
      #block a.act {
        color: green;
      }
    </style>
  </head>
  
  <body>
    <div id="block">
      <a>Привет</a>
      <a>дорогие</a>
      <a>друзья</a>
    </div>
    <script>
      (function ($) {
        $('#block a').on('click', function () {
          $(this).siblings().removeClass('act').end().addClass('act');
        })
      })(jQuery);
    </script>
  </body>

danik.js · #4 (**permalink**) 16.12.2013, 19:45

$(this).addClass('act').siblings().removeClass('act');

ami_moor · #5 (**permalink**) 18.12.2013, 17:21

Спасибо!

Форум

Справочник

Discord чат

Курсы javascript