jquery - 使用 jquery 和 css 切换两个链接之间的背景颜色以显示哪个是活动的？

Question

(Jquery) 我有两个 div，我在我的页面上使用每个 div 的链接来回切换（显示和隐藏）。我希望单击的链接更改为突出显示的背景颜色，并且当您单击另一个链接时，它会突出显示并且之前的链接恢复正常。

我已经尝试修改我为 div 获得的切换代码以将其应用于链接上的 css，但我无法弄清楚。

如果有人有想法，我将不胜感激。谢谢你。

Answer 1

<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');

    });

});

如果您的链接在带有类或 id 的 div 中，则可以缩短 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 的链接能力。希望这可以帮助！

Answer 2

您希望代码同时选择两者，并将类仅应用于选定的一个。

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

之后，您只需要两个单独的 CSS 规则。

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

Answer 3

设置 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 可见。）