<a>使用Javascript</a>將<a>類</a>設置<a>為“活動”</a>

Question

我有一個導航欄，該導航欄在整個頁面上都很常見，因此更容易更新，但是現在<a>標記上的class="active"當然不起作用。 我一直在嘗試使用Javascript來擺弄它，以便在單擊它們時將活動狀態添加到該鏈接中，並從前一個鏈接中刪除。

 $(document).ready(function() { //active state $(function() { $('.start').addClass('active'); $('#Side_Menu a').click(function() { $('#Side_Menu a').removeClass('active'); $(this).addClass('active'); }); }); }); 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <ul class="nav nav-pills nav-stacked" id="Side_Menu"> <li><a href="dashboard.php" class="active"><i class="fa fa-th" aria-hidden="true"></i> &nbsp;Dashboard</a></li> <li><a href="blog_posts.php"><i class="fa fa-file-text" aria-hidden="true"></i> &nbsp;Blog Posts</a></li> <li><a href="addnewpost.php"><i class="fa fa-code" aria-hidden="true"></i> &nbsp;Add New Post</a></li> <li><a href="categories.php"><i class="fa fa-list" aria-hidden="true"></i> &nbsp;Categories</a></li> <li><a href="admins.php"><i class="fa fa-user" aria-hidden="true"></i> &nbsp;Manage Admins</a></li> </ul> 

我在第一個<a>上active狀態，因為這是默認的加載頁面。 不知道為什么這不起作用。 它四處導航並且我沒有收到任何錯誤，但是JS並沒有完成它的工作。

任何幫助，將不勝感激。

Answer 1

當您導航到另一個頁面時，整個事情再次開始。 當您單擊鏈接時，您的JS正常運行，但是隨后您立即導航到另一頁，一切從頭開始。

只是為了好玩，如果您從菜單中href了所有href屬性，那么您的JS就可以使用，但是您無法在任何地方導航。

在PHP模板中添加active類而不是使用JS是最簡單的。 例如：

class="<?= $_SERVER['REQUEST_URI'] == 'dashboard.php' ? 'active' : '' ?>"...

Answer 2

嘗試這個：

    $(document).ready(function() {
        $(function() {
            $('.start').addClass('active');
            $('#Side_Menu a').click(function(e) {
                e.preventDefault();
                $('#Side_Menu a').removeClass('active');
                $(this).addClass('active');
            });
        });
    });

我僅出於測試目的而阻止了默認設置。 如果頁面被卸載（您導航到另一個頁面），您可能不會注意到HTML上的更改。

 $(document).ready(function() { $('.start').addClass('active'); $('#Side_Menu a').click(function(e) { e.preventDefault(); $('#Side_Menu a').removeClass('active'); $(this).addClass('active'); }); }); 

 a.active { color: red; } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <ul class="nav nav-pills nav-stacked" id="Side_Menu"> <li><a href="dashboard.php" class="active"><i class="fa fa-th" aria-hidden="true"></i> &nbsp;Dashboard</a></li> <li><a href="blog_posts.php"><i class="fa fa-file-text" aria-hidden="true"></i> &nbsp;Blog Posts</a></li> <li><a href="addnewpost.php"><i class="fa fa-code" aria-hidden="true"></i> &nbsp;Add New Post</a></li> <li><a href="categories.php"><i class="fa fa-list" aria-hidden="true"></i> &nbsp;Categories</a></li> <li><a href="admins.php"><i class="fa fa-user" aria-hidden="true"></i> &nbsp;Manage Admins</a></li> </ul> 

編輯：這段代碼將使用jQuery和解析location.href以非常簡單的方式選擇當前鏈接：

<script>
    $(document).ready(function() {
        var url      = String(location.href),
            selected = url.substr(url.lastIndexOf('/') + 1);
        $('#Side_Menu a[href="' + selected + '"]').addClass('active');
    });
</script>

Answer 3

您正在重復相同的代碼（准備好文檔）：

$(document).ready(function(){
    //active state  
    $(function() {
        $('.start').addClass('active');
        $('#Side_Menu a').click(function() {
        $('#Side_Menu a').removeClass('active');
        $(this).addClass('active');             
        });
    });
});

您應該嘗試使用此方法：

$(document).ready(function(){
        //active state  
        $('.start').addClass('active');
        $('#Side_Menu li a').click(function() {
        $('#Side_Menu li a').removeClass('active');
        $(this).addClass('active'); 
        });            
});

那“開始”課是干什么的呢？