Установить элемент <li>как активный при переходе на определенную страницу - PullRequest
Новая
       32

Установить элемент <li>как активный при переходе на определенную страницу

0 голосов
/ 20 октября 2018

Я работаю на веб-сайте Asp.Net, где я заменил горизонтальную панель навигации по умолчанию в Site.Master на панель навигации, доступную в примере AdminLTE. Пример AdminLTE .

Вертикальная панель навигации выглядит следующим образом

Vertical Navbar

Код для панели навигации указан ниже

<ul class="sidebar-menu" data-widget="tree">
                <li class="header">Navigation</li>
                <!-- Optionally, you can add icons to the links -->
                <li>
                    <a href="Default.aspx">
                        <i class="fa fa-home"></i>
                        <span>Home</span>
                    </a>
                </li>
                <li>
                    <a href="About.aspx">
                        <i class="fa fa-question"></i>
                        <span>About</span>
                    </a>
                </li>
                <li>
                    <a href="Contact.aspx">
                        <i class="fa fa-address-book"></i>
                        <span>Contact</span>
                    </a>
                </li>
                <li class="treeview">
                    <a href="#"><i class="fa fa-link"></i> <span>Multilevel</span>
                        <span class="pull-right-container">
                            <i class="fa fa-angle-left pull-right"></i>
                        </span>
                    </a>
                    <ul class="treeview-menu">
                        <li><a href="#">Link in level 2</a></li>
                        <li><a href="#">Link in level 2</a></li>
                    </ul>
                </li>
            </ul>

Я хочу установить класс элемента списка на active , как только пользователь перейдет на эту конкретную страницу.Например, если пользователь щелкает ссылку About , она будет перенаправлена ​​на страницу about, а затем на эту страницу класс ссылки about должен быть изменен на active * 1021.*

Я пытался использовать этот конкретный скрипт, но он не работал для меня 

$(function() {
 var pgurl = window.location.href.substr(window.location.href.lastIndexOf("/")+1);
 $("ul li a").each(function(){
      if($(this).attr("href") == pgurl || $(this).attr("href") == '' )
      $(this).addClass("active");
 })

});

Не знаю, чего мне не хватает.

1 Ответ

0 голосов
/ 20 октября 2018

Ваша each функция основана на селекторе для <a> элементов.
Итак, вы в настоящее время добавляете класс к элементу <a>, на что ссылается $(this).
Кажется, чтоВы хотите добавить его в связанный элемент <li>.

Я рекомендую jQuery's parent().

Получить родительский элемент каждого элемента в текущемнабор согласованных элементов, которые могут быть отфильтрованы по выбору. 

var test_url = 'localhost:5583/About.aspx';

$(function() {
  var pgurl = test_url.substr(test_url.lastIndexOf("/") + 1);
  $("ul li a").each(function() {
    if ($(this).attr("href") == pgurl || $(this).attr("href") == '')
      $(this).parent().addClass("active");
  })
});
.active {
  background-color: yellow;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul class="sidebar-menu" data-widget="tree">
  <li class="header">Navigation</li>
  <!-- Optionally, you can add icons to the links -->
  <li>
    <a href="Default.aspx">
      <i class="fa fa-home"></i>
      <span>Home</span>
    </a>
  </li>
  <li>
    <a href="About.aspx">
      <i class="fa fa-question"></i>
      <span>About</span>
    </a>
  </li>
  <li>
    <a href="Contact.aspx">
      <i class="fa fa-address-book"></i>
      <span>Contact</span>
    </a>
  </li>
  <li class="treeview">
    <a href="#"><i class="fa fa-link"></i> <span>Multilevel</span>
      <span class="pull-right-container">
        <i class="fa fa-angle-left pull-right"></i>
      </span>
    </a>
    <ul class="treeview-menu">
      <li><a href="#">Link in level 2</a></li>
      <li><a href="#">Link in level 2</a></li>
    </ul>
  </li>
</ul>

В качестве альтернативы, в основном в качестве демонстрации, вы можете изменить селектор на li и проверить href s потомка<a> элементов. 

var test_url = 'localhost:5583/About.aspx';

$(function() {
  var pgurl = test_url.substr(test_url.lastIndexOf("/") + 1);
  $("ul li").each(function() {
    if ($('a', this).attr("href") == pgurl || $('a', this).attr("href") == '')
      $(this).addClass("active");
  })
});
.active {
  background-color: yellow;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul class="sidebar-menu" data-widget="tree">
  <li class="header">Navigation</li>
  <!-- Optionally, you can add icons to the links -->
  <li>
    <a href="Default.aspx">
      <i class="fa fa-home"></i>
      <span>Home</span>
    </a>
  </li>
  <li>
    <a href="About.aspx">
      <i class="fa fa-question"></i>
      <span>About</span>
    </a>
  </li>
  <li>
    <a href="Contact.aspx">
      <i class="fa fa-address-book"></i>
      <span>Contact</span>
    </a>
  </li>
  <li class="treeview">
    <a href="#"><i class="fa fa-link"></i> <span>Multilevel</span>
      <span class="pull-right-container">
        <i class="fa fa-angle-left pull-right"></i>
      </span>
    </a>
    <ul class="treeview-menu">
      <li><a href="#">Link in level 2</a></li>
      <li><a href="#">Link in level 2</a></li>
    </ul>
  </li>
</ul>
...