1

Есть список из ссылок

<div id="selectBackground">
            <p>Select</p>
            <ul>
                <li><a href="javascript:void(0)" class="active"></a></li>
                <li><a href="javascript:void(0)"></a></li>
                <li><a href="javascript:void(0)"></a></li>
            </ul>
        </div> ​

При клике на ссылку к ней должен добавляться класс active, а у ссылки, к которой он был добавлен раньше, его нужно убрать. Пока получилось только добавлять класс к ссылкам: http://jsfiddle.net/UeML6/8/.
Подскажите, как нужно дописать этот скрипт, чтобы класс active еще автоматически убирался из предыдущей ссылки?

4 ответа 4

13

$("#selectBackground ul li a").click(function(e) {
  e.preventDefault();
  $("#selectBackground ul li a").removeClass('active');
  $(this).addClass('active');
})
#selectBackground {
  background: #000;
  width: 187px;
  height: 37px;
}
#selectBackground > p {
  margin: 0;
  padding: 0;
  padding-top: 3px;
  padding-left: 6px;
  float: left;
  color: #fff;
  font-size: 24px;
  font-weight: bold;
}
#selectBackground ul {
  margin: 0;
  padding: 0;
  padding-top: 10px;
  margin-left: 90px;
}
#selectBackground ul li {
  float: left;
  list-style-type: none;
  position: relative;
  margin-left: 10px;
}
#selectBackground ul li a {
  background: red url('../images/select_bg_unactive.png') no-repeat;
  display: block;
  width: 16px;
  height: 16px;
}
#selectBackground ul li a.active {
  background: yellow url('../images/select_bg_active.png') no-repeat;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="selectBackground">
  <p>Select</p>
  <ul>
    <li><a href='' class="active"></a></li>
    <li><a href=''></a></li>
    <li><a href=''></a></li>
  </ul>
</div>

Пример на jsfiddle

4
  • 2
    Нет, фуфу, это ужасно. Вы путаете. Функция jQuery(document).ready(function(){ идентична функции $(function() { Сделано это просто для сокращения писанины.
    – lampa
    23 ноя 2012 в 12:14
  • @lampa, уговорил.
    – goozler
    23 ноя 2012 в 12:20
  • Подскажите, а как надо дописать данный скрипт, чтобы при клике на ссылку не только добавлялся класс к выбранной ссылке, но и менялся бэкграунд у определенного дива в зависимости от выбранной ссылки?
    – Heidel
    23 ноя 2012 в 20:02
  • 2
    В той же функции добавить селектор нужного дива и изменить фон методом css. Примерно так jsfiddle.net/UeML6/37
    – goozler
    26 ноя 2012 в 5:28
5
$(function() {
    $("#selectBackground ul li a").click(function() {
        $("#selectBackground ul li a").removeClass("active");         
        $(this).toggleClass("active");
    })
});
1
1

Проверить существование класса у элемента можно с помощью метода jQuery hasClass

0
// сначала удаляешь все
$('li').each(function(index) {
    $(this).removeClass('active');
});
// на нужную вешаешь 
$(this).addClass('active');
2
  • $('li').removeClass(...
    – lampa
    23 ноя 2012 в 22:15
  • @kal1sha, Чтобы отформатировать код, выделите его мышью и нажмите на кнопку {} редактора.
    – Deleted
    26 ноя 2012 в 14:48

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.