Переключите Цвет фона между двумя ссылками, чтобы показать, какая из них активна с помощью jquery и css? - PullRequest
Новая
       13

Переключите Цвет фона между двумя ссылками, чтобы показать, какая из них активна с помощью jquery и css?

0 голосов
/ 13 ноября 2009

(Jquery) У меня есть два элемента div, между которыми я переключаюсь назад и вперед (показать и скрыть) на своей странице, используя ссылку на каждый из них. Я хочу, чтобы ссылка, по которой вы щелкнули, изменилась на выделенный цвет фона, а когда вы щелкнете по другой, она будет выделена, а предыдущая вернется к нормальной.

Я пытался переделать код переключения, который у меня есть для div, чтобы применить его к css по ссылкам, но я не могу понять это.

Если у кого-нибудь есть идея, я буду благодарен. Спасибо.

Ответы [ 3 ]

1 голос
/ 13 ноября 2009 
<a href="link1" class="theLinkClass" id="currentLink">Link 1</a>
<a href="link2" class="theLinkClass">Link 2</a>

Тогда в вашем CSS 

#currentLink {
    background-color: #FFCCCC;
}

Тогда ваш JQuery 

$(document).ready(function(){

    $('.theLinkClass').click(function(){

        $('.theLinkClass').attr('id','');
        $(this).attr('id','currentLink');

    });

});

Если у вас есть ссылки в div с классом или id, код jQuery может быть сокращен.

Допустим .... 

<div class="myLinks">
    <a href="link1" class="currentLink">Link 1</a>
    <a href="link2">Link 2</a>
</div>

CSS 

.currentLink{
    background-color: #FF0000;
}

JQuery 

$(document).ready(function(){

    $('.mylinks a').click(function(){

        $('.mylinks a').removeClass('currentLink').filter(this).addClass('currentLink');

    });

});

Последний из двух примеров использует преимущества цепочки jQuery. Надеюсь, это поможет!

0 голосов
/ 13 ноября 2009

Настройка CSS для подсветки и переключения: 

.First .ShowFirst { border: 1px solid #000; }
.First .SecondContent { display: none; }
.Second .ShowSecond { border: 1px solid #000; }
.Second .FirstContent { display: none; }

Javascript для привязки событий щелчка, которые изменяют имя класса родителя: 

$(function() {
  $('.ShowFirst').Click(function(){
    $('#Parent').attr('className', 'First');
    return false;
  });
  $('.ShowSecond').Click(function(){
    $('#Parent').attr('className', 'Second');
    return false;
  });
});

Имя класса родительского элемента определяет, какая ссылка будет выделена, а какое содержимое показано. Здесь показывается первый контент с начала: 

<div id="Parent" class="First">
  <a class="ShowFirst" href="#">Show first</a>
  <a class="ShowSecond" href="#">Show second</a>
  <div class="FirstContent">1</div>
  <div class="SecondContent">2</div>
</div>

(В качестве бонуса он не будет отображать оба содержимого при загрузке и скрывать один, когда загрузка завершена. Только один из div-ов содержимого виден с начала.)

0 голосов
/ 13 ноября 2009

Требуется код, который выбирает оба и применяет класс только к одному из выбранного. 

$('div.togglers').click(function() {
    $('div.togglers').removeClass('selected').filter(this).addClass('selected');
});

После этого вам просто нужно два отдельных правила CSS. 

div.togglers {
  background-color: white;
}
div.togglers.selected {
  background-color: red;
}
...