Как изменить тег li при нажатии на него - PullRequest
Новая
       22

Как изменить тег li при нажатии на него

0 голосов
/ 27 марта 2019

Я хочу изменить функцию класса li как «активную» при нажатии на нее.Когда это происходит, открывается новая страница, и класс li указывается как активный.Например, страницу можно открыть с помощью тега, названного для Overview, как определено li.Когда я нажимаю любой из тегов, новую страницу можно открыть с активным тегом li.Я пытаюсь написать несколько кодов, но не могу изменить актив li

Вот мои коды, показанные ниже.

Домашняя страница 

<div class="col-sm-3 col-md-2 sidebar">
    <ul class="nav nav-sidebar">
        <li class="active"><a href="index.jsp">Overview</a></li>
        <li><a href="list_users">Users</a></li>
        <li><a href="#">Categories</a></li>
        <li><a href="#">Books</a></li>
    </ul>
        <ul class="nav nav-sidebar">
        <li><a href="#">Customers</a></li>
        <li><a href="#">Reviews</a></li>
        <li><a href="#">Orders</a></li>
        </ul>
</div>

Страница пользователя. 

<div class="col-sm-3 col-md-2 sidebar">
    <ul class="nav nav-sidebar">
        <li><a href="index.jsp">Overview</a></li>
        <li><a href="list_users">Users</a></li>
        <li><a href="#">Categories</a></li>
        <li><a href="#">Books</a></li>
    </ul>
    <ul class="nav nav-sidebar">
        <li><a href="">Customers</a></li>
        <li><a href="">Reviews</a></li>
        <li><a href="">Orders</a></li>
    </ul>
</div>

Javascript code 

<script>
    // Nav bar change active status
    $(".nav li").on("click", function() {
        $(".nav li").removeClass("active");
        $(this).addClass("active");
    });
</script>

То, что я говорю, это изменение активного значения

, когда я щелкаю по любому элементу на основе .

Обычно,это показывает, как это 

<div class="col-sm-3 col-md-2 sidebar">
    <ul class="nav nav-sidebar">
        <li><a href="index.jsp">Overview</a></li>
        <li class="active"><a href="list_users">Users</a></li>
        <li><a href="#">Categories</a></li>
        <li><a href="#">Books</a></li>
    </ul>
    <ul class="nav nav-sidebar">
        <li><a href="">Customers</a></li>
        <li><a href="">Reviews</a></li>
        <li><a href="">Orders</a></li>
    </ul>
</div>

Но это действительно показывает, как это 

<div class="col-sm-3 col-md-2 sidebar">
    <ul class="nav nav-sidebar">
        <li><a href="index.jsp">Overview</a></li>
        <li><a href="list_users">Users</a></li>
        <li><a href="#">Categories</a></li>
        <li><a href="#">Books</a></li>
    </ul>
    <ul class="nav nav-sidebar">
        <li><a href="">Customers</a></li>
        <li><a href="">Reviews</a></li>
        <li><a href="">Orders</a></li>
    </ul>
</div>

.nav-sidebar > .active > a,
.nav-sidebar > .active > a:hover,
.nav-sidebar > .active > a:focus {
  color: #fff;
  background-color: #428bca;
}

Я имею в виду, чтобы показать, что код javascipt не может работать.Как я мог это исправить?

Ответы [ 2 ]

1 голос
/ 27 марта 2019

Почему бы вам не использовать псевдокласс CSS :active для решения этой проблемы? 

.nav li:active {
    // your style
}
0 голосов
/ 28 марта 2019

Вот мой ответ.Я решил это. 

$(function(){
  var current_page_URL = location.href;
  $( "a" ).each(function() {
     if ($(this).attr("href") !== "#") {
       var target_URL = $(this).prop("href");
       if (target_URL == current_page_URL) {
          $('nav a').parents('li, ul').removeClass('active');
          $(this).parent('li').addClass('active');
          return false;
       }
     }
  });
});
...