通过javascript将“活动”类添加到选定的列表项

Question

我有一个类名“active”，我希望将其添加到所选列表项中。

以下是我的列表样式的样子：

<ul class="page-sidebar-menu">

<li class="start active">
                    <a href="dashboard.php"><span class="title">Dashboard</span></a>
                </li>
                <li >
                    <a href="javascript:;"><span class="title">Pages</span></a>
                    <ul class="sub-menu">
                        <li >
                            <a href="all-pages.php">All Page</a>
                        </li>
                        <li >
                            <a href="add-page.php">Add Page</a>
                        </li>
                    </ul>
                </li>

              <li>
                    <a href="javascript:;"><span class="title">Posts</span></a>
                    <ul class="sub-menu">
                        <li >
                            <a href="all-posts.php">All Posts</a>
                        </li>
                        <li >
                            <a href="add-posts.php">Add Posts</a>
                        </li>
                    </ul>
                </li>

</ul>

我想在两个地方添加课程，在子菜单下添加“li”并<span class="title">Posts</span>

看起来应该是这样的

我尝试过类似的东西，但没有工作

$('.page-sidebar-menu ul li a').click(function() {
              $('.page-sidebar-menu ul li').removeClass('active');    
              $(this).addClass('active');
            }); 

请提出一些解决方案。

谢谢！

Answer 1

$(".sub-menu li").addClass("active");
$(".title").addClass("active");

将类添加到list-element和标题Post元素。 如果要删除可以使用的类。 '.removeClass（[要删除的类]）'

这样做的功能：

$(".sub-menu li").click(function(){
  $(".sub-menu li").removeClass('active');//to make sure there will be only one with the class 'active'
  $(this).addClass('active');
});

<强> DEMO