<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'); 
        });            
});

那“开始”课是干什么的呢？