Question

我有一个a.href列表，其中包含许多URL。当我单击a.href时，它将重新加载我的页面。我不知道如何将类.active添加到当前选择的a.href中。

在Ajax调用中，它像这样的代码一样简单，因为未重新加载页面而起作用。但是我用PHP编写并使用$_GET和$_POST方法。因此必须重新加载页面。

是否有任何方法可以在.active链接上添加类a.href？

<div class="btn-group listEp col-md-12">
    $i = 0;
    <a href="#" style="opacity: 1;" class="btn btn-success disabled">Episode:</a>
    <?php foreach($data['episodes'] as $epList) { ?>
        <a class="btn btn-default" href="<?php echo $epList['href']); ?>"> <?php echo $i++; ?> </a>
    <?php } ?>
</div>
$(function() {
    $('#listEp').on("click", "a", function() {  
        $( "#listEp a:first-child" ).css("cssText", "background: #4CAF50 !important;");
        $(this).addClass('active').siblings().removeClass('active');
    });
});

Answer 1

您可以这样简单地做

$('a.btn[href]').click(function(){
    $('a.btn[href]').removeClass('active');
    $(this).addClass('active');
});

以上代码从其他相同元素中删除了活动类，并在此元素中添加了类。在重新加载时呈现的页面上添加以下代码，

$(document).ready(function(){
    $('a.active.btn[href]').removeClass('active');
});

Answer 2

如果您不想在单击后重新加载页面并为此创建自定义操作，请执行以下操作：

$('#listEp').on("click", "a", function(e) {  
    e.preventDefault() // this will disable default action which is redirect in case of a element
    e.stopPropagation() // this will stop element beeing propagated by other functions

    $( "#listEp a:first-child" ).css("cssText", "background: #4CAF50 !important;");
    $(this).addClass('active').siblings().removeClass('active');
});

Answer 3

好像您要定位的ID不存在，该元素具有类listEp。尝试使用$('.listEp')

加载另一个页面后单击链接时，JavaScript添加类是否处于活动状态？

3 个答案: