добавить «активный» класс к выбранному элементу списка через JavaScript

Question

добавить «активный» класс к выбранному элементу списка через JavaScript

0

У меня есть имя класса "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');
            });

Пожалуйста, предложите некоторое решение.

Спасибо!

user3201500 22 фев. 2014, в 20:37

Источник

Теги:

javascript

jquery

1 ответ

Ещё вопросы

Mark Nijboer · Answer 1 · 2014-02-22T16-33-00.000Z

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

Чтобы добавить класс к элементу списка и элементу "Заголовок". Если вы хотите удалить класс, который вы можете использовать. '.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

Да, но мне нужно удалить предыдущий класс также. и нужно иметь класс в <span class="title">Posts</span>
@ user3201500 Но у li-item нет предыдущего класса. И вы хотите, чтобы класс 'title' тоже был удален?
только что добавил скриншот. Пожалуйста, учтите это тоже. Спасибо.
@ user3201500: Звучит так, как вы хотите, чтобы $(".sub-menu li.active").remnoveClass('active') перед добавлением класса в другой элемент.
@ user3201500 отредактировал ответ с функцией для li-item.