为什么我的<a>标签选择不起作用？

我有这样的代码：为什么我的<a>标签选择不起作用？

<div class="list-group" id="generalView"> 
    <a href="" id="today" onclick="displayData()" class="list-group-item" data-toggle="modal" data-target="#displayDiary"> 
     <h4 class="list-group-item-heading">Today's Diary</h4> 
    </a> 
    <a href="" class="list-group-item"> 
     <h4 class="list-group-item-heading">Last Week's Diaries</h4> 
    </a> 
    <a href="" class="list-group-item"> 
     <h4 class="list-group-item-heading">Last Month's Diaries</h4> 
    </a> 
</div>

$('#generalView > a').click(function(e) { 
    e.preventDefault(); 
    $('#generalView > a').removeClass('active'); 
    $(this).addClass('active'); 
});

我想点击一个<a>标签，但我选择不工作时添加一个类active。我选择错了吗？我已经尝试给每个<a>元素分配一个类，然后尝试选择该类，但是不能很好地工作。这是为什么发生？

来源

2016-11-12 G. Rocha

您的代码似乎好工作：HTTPS： // jsfi ddle.net/ejfxa4jL/。请注意，您需要对传递给处理函数的事件调用'preventDefault（）'，否则页面将被传输并且状态将会丢失。如果你想保持页面之间的状态，那么你需要将选择存储在某个地方，例如。在URL中作为querystring参数，'localStorage'，'sessionStorage'，一个cookie，服务器端会话或数据存储。 –

你正在编辑的问题比我能写出的答案更快 - 在某一点上它没问题 - 就我所见，选择器没有问题。唯一的问题是，你可能想为'addClass'调用'$（this）'而不是每个''标签都是'＃generalView'的子标签。如果你有任何疑问，只需在控制台上测试它们页面你不确定 - 不需要使用提醒:)。道歉，如果这是现在不太相关，但编辑！ – Brian

这听起来很合理，我试过但没有奏效。里面的代码不工作。我甚至试图只选择''标签，并且不起作用。看起来像即使我打电话'preventDefault（）'代码只是不工作 –

下面是一个简单的解决方案，在每个标签上使用一个类。希望能帮助到你！

$(document).ready(function(){ 
 
    $('#generalView > a').click(function() { 
 
    $('.myClass').removeClass('active'); 
 
    $(this).addClass('active'); 
 
    return false; 
 
}); 
 

 
});

.active { 
 
    color: red; 
 
}

<script type = "text/javascript" 
 
     src = "https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script> 
 
<div class="list-group" id="generalView"> 
 
    <a href="" id="today" onclick="displayData()" class="list-group-item myClass" data-toggle="modal" data-target="#displayDiary"> 
 
     <h4 class="list-group-item-heading">Today's Diary</h4> 
 
    </a> 
 
    <a href="" class="list-group-item myClass"> 
 
     <h4 class="list-group-item-heading">Last Week's Diaries</h4> 
 
    </a> 
 
    <a href="" class="list-group-item myClass"> 
 
     <h4 class="list-group-item-heading">Last Month's Diaries</h4> 
 
    </a> 
 
</div>

来源

2016-11-12 22:14:50 HenryDev

正如我在我的问题中说我已经尝试过，并没有工作：/但谢谢 –

@ G.Rocha我想我有点对你的问题感到困惑。因此，让我们说你点击链接1，然后这个链接应该是红色的唯一链接。然后，如果你点击链接2，那么这个链接应该是只有红色的链接，等等......这就是你想要的吗？因为那就是我的代码 – HenryDev

是的。我想这样做。问题是选择不起作用，所以我所有的JavaScript代码都没有运行。所以我想知道为什么选择不起作用。 –

可以毫不JS做

考虑您的具体情况如下代码

a:active { 
 
    color: orange; 
 
}

<script type = "text/javascript" 
 
     src = "https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script> 
 
<div class="list-group" id="generalView"> 
 
    <a href="" id="today" class="list-group-item myClass" data-toggle="modal" data-target="#displayDiary"> 
 
     <h4 class="list-group-item-heading">Today's Diary</h4> 
 
    </a> 
 
    <a href="" class="list-group-item myClass"> 
 
     <h4 class="list-group-item-heading">Last Week's Diaries</h4> 
 
    </a> 
 
    <a href="" class="list-group-item myClass"> 
 
     <h4 class="list-group-item-heading">Last Month's Diaries</h4> 
 
    </a> 
 
</div>

来源

2016-11-12 23:09:00

为什么我的<a>标签选择不起作用？

回答

相关问题