Question

我正在javascript中使用addClass和removeClass方法，例如以下代码：

 <div id="topheader">
    <ul class="nav nav-tabs">
        <li class="nav-item">
            <a class="nav-link active" href="#page1">Active</a>
        </li>
        <li class="nav-item">
            <a class="nav-link" href="#page2">Link</a>
        </li>
        <li class="nav-item">
            <a class="nav-link" href="#page3">Link</a>
        </li>
    </ul>
</div>

<script>
    $(document).ready(function()
    {
        $( '#topheader .nav  a' ).on( 'click', function (e) {
            $( '#topheader .nav' ).find( 'li.active' ).removeClass( 'active' );
            $( this ).parent( 'li' ).addClass( 'active' );
        });
    })

</script>

和我包含在标头中的库在这里

  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.6.1/css/all.css" integrity="sha384-gfdkjb5BdAXd+lj+gudLWI+BXq4IuLW5IT+brZEZsLFm++aCMlF1V92rMkPaX4PP" crossorigin="anonymous">
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js" integrity="sha384-ZMP7rVo3mIykV+2+9J3UJ46jBk0WLaUAdn689aCwoqbBJiSnjAK/l8WvCWPIPm49" crossorigin="anonymous"></script>


<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>

我在检查中没有任何错误，也没有解决该问题的方法吗？

Answer 1

您将li与a标记混淆：

$(document).ready(function() {
    $('#topheader .nav  a').on('click', function(e) {
        $('#topheader .nav').find('a.active').removeClass('active');
        $(this).addClass('active');
    });
})

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.6.1/css/all.css" integrity="sha384-gfdkjb5BdAXd+lj+gudLWI+BXq4IuLW5IT+brZEZsLFm++aCMlF1V92rMkPaX4PP" crossorigin="anonymous">
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js" integrity="sha384-ZMP7rVo3mIykV+2+9J3UJ46jBk0WLaUAdn689aCwoqbBJiSnjAK/l8WvCWPIPm49" crossorigin="anonymous"></script>

<div id="topheader">
    <ul class="nav nav-tabs">
        <li class="nav-item">
            <a class="nav-link active" href="#page1">Active</a>
        </li>
        <li class="nav-item">
            <a class="nav-link" href="#page2">Link</a>
        </li>
        <li class="nav-item">
            <a class="nav-link" href="#page3">Link</a>
        </li>
    </ul>
</div>

Answer 2

代替“ li.active”使用，例如“ li> a.active”，也使用“ $（this ..addClass（'active'）;”

  $(document).ready(function()
    {
        $( '#topheader .nav  a' ).on( 'click', function (e) {
            $( '#topheader .nav' ).find( 'li > a.active' ).removeClass( 'active' );
            $( this ).addClass( 'active' );
        });
    })

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.6.1/css/all.css" integrity="sha384-gfdkjb5BdAXd+lj+gudLWI+BXq4IuLW5IT+brZEZsLFm++aCMlF1V92rMkPaX4PP" crossorigin="anonymous">
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js" integrity="sha384-ZMP7rVo3mIykV+2+9J3UJ46jBk0WLaUAdn689aCwoqbBJiSnjAK/l8WvCWPIPm49" crossorigin="anonymous"></script>

 <div id="topheader">
    <ul class="nav nav-tabs">
        <li class="nav-item">
            <a class="nav-link active" href="#page1">Active</a>
        </li>
        <li class="nav-item">
            <a class="nav-link" href="#page2">Link</a>
        </li>
        <li class="nav-item">
            <a class="nav-link" href="#page3">Link</a>
        </li>
    </ul>
</div>

addClass和removeClass方法不起作用

2 个答案: