Question

我正在处理的网站上有一个链接循环。每个链接都有一个唯一的ID，当我点击其中一个链接时，链接将以粗体文本突出显示。如果我点击其他链接，突出显示的链接将替换为我刚刚点击的链接。

示例代码（请参阅jsFiddle示例）：

$('body').on('click', '#link-1', function() {
    if($(this).hasClass('normal-text')) {
        $(this).removeClass('normal-text');
        $(this).addClass('bold-text');

    } else if($(this).hasClass('bold-text')) {
        $(this).removeClass('bold-text');
        $(this).addClass('normal-text');
    }
});

我该如何做到这一点？

基本演示：http://jsfiddle.net/edgren/3VXVL/

直播演示以确切了解我的意思：问题已解决

提前致谢。

Answer 1

试试这个http://jsfiddle.net/3VXVL/4/

的javascript：

$(document).ready(function() {
    $('body').on('click', '.link', function() {
        $('.bold-text').removeClass('bold-text');
        $(this).addClass('bold-text');
    });
});

HTML：

<a href="javascript:void(0)" id="link-1" class="link normal-text">Link 1</a> - 
<a href="javascript:void(0)" id="link-2" class="link normal-text">Link 2</a> - 
<a href="javascript:void(0)" id="link-3" class="link normal-text">Link 3</a>

Answer 2

您可以选择与课程相关的链接，然后将其删除：

$('.bold-text').removeClass('bold-text').addClass('normal-text');

Answer 3

您可以为每个链接分配一个类，例如“.changeableLink”。然后，你可以这样做：

var allLinks = $('.changeableLink');
$('body').on('click', '.changeableLink',function() {
      allLinks.removeClass('bold-text');
      $(this).addClass('bold-text');
});

单击另一个链接后从链接中删除突出显示

3 个答案: