Добавить 'активный' класс в ссылки на связь de

Question

Я хочу добавить «активный» класс в ссылку навигации в зависимости от того, на какой странице im.

Вот мой код штрих-кода.

<div id="navigation"> 
 
\t \t \t <ul class="nav"> 
 
\t \t 
 
\t \t \t \t <li><a href="index.php">Home</a></li> 
 
\t \t \t \t <li><a href="#">Blog</a></li> 
 
\t \t \t \t <li><a href="#">Members</a></li> 
 
\t \t \t \t <li><a href="#">About</a></li> 
 

 
\t \t \t </ul> 
 
\t \t </div>

Answer 1

Вот как это делается в PHP.

<?php 
    $menu = array(
     array(
      'href' => 'index.php', 
      'text' => 'Index', 
     ), 
     array(
      'href' => 'test.php', 
      'text' => 'Test', 
     ), 
    ); 
?> 
<nav> 
    <ul class="menu"> 
     <?php 
      foreach ($menu as $link) { 
       $item='<li>'; 
       if (substr($_SERVER['REQUEST_URI'], 1) == $link['href']) { 
        $item.='<a href="'.$link['href'].'" class="active">'.$link['text'].'</a>'; 
       } else { 
        $item.='<a href="'.$link['href'].'">'.$link['text'].'</a>'; 
       } 
       $item.='</li>'; 
       print $item; 
      } 
     ?> 
    </ul> 
</nav> 

Как вы можете видеть, я использовал массив вместо какого-то простого HTML, я предлагаю вам сделать то же самое, как для многих вещей, как это возможно. Это делает ваш код более «динамичным» и имеет много преимуществ.

---

Вот как это делается в JavaScript

<nav> 
    <ul class="menu"> 
     <li><a href="index.php">Index</a></li> 
     <li><a href="test.php">Test</a></li> 
    </ul> 
</nav> 
<script type="text/javascript"> 
    var menu = document.querySelectorAll('.menu li a'); 
    for (var i = menu.length - 1; i >= 0; i--) { 
     if (menu[i].href==document.URL) { 
      menu[i].setAttribute("class", "active"); 
     } 
    }; 
</script> 

The jsfiddle

---

И не забывайте, что JQuery делать это ..

<nav> 
    <ul class="menu"> 
     <li><a href="index.php">Index</a></li> 
     <li><a href="test.php">Test</a></li> 
    </ul> 
</nav> 
<script src="//ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
<script type="text/javascript"> 
    $('.menu li a').each(function() { 
     if ($(this).attr('href')==location.pathname.substr(1)){ 
      $(this).addClass('active'); 
     } 
    }); 
</script> 

The jsfiddle

Answer 2

Вы можете использовать CSS стилей, чтобы сделать это.

CSS файл

#navigation li a.current{ 
    color: #ffffff; 
    background:#000000; 
} 

HTML файл

<div id="navigation"> 
      <ul class="nav"> 

       <li><a class="current" href="index.php">Home</a></li> 
       <li><a href="#">Blog</a></li> 
       <li><a href="#">Members</a></li> 
       <li><a href="#">About</a></li> 

      </ul> 
</div> 

Answer 3

Использование JQuery решить эту проблему

$(document).ready(function() { 
      $('.nav li a').on('click', function(event) { 
       $('.nav li a').removeClass('active').removeAttr('class'); 
       $(this).addClass('active'); 
      }); 
     });