Wie lege ich eine aktive Klasse zu nav ul li ein Element hinzu, wenn es einige Unterseiten damit hat?

Question

Ich arbeite an der Drupal 8 Website. In diesem ich habe ein Problem beim Zuweisen einer aktiven Klasse zu nav Listenelementen. Ich habe den folgenden Code verwendet, um die aktive Klasse zu setzen, es funktioniert für die gleiche URL. Der Code sieht wie folgt aus

<nav id="getnav"> 
      <ul> 
       <li> 
        <a class="" data-drupal-link-system-path="user" href="/drupal/todo">Todo</a> 
       </li> 
       <li> 
        <a class="" data-drupal-link-system-path="user" href="/drupal/files">Files</a> 
       </li> 
       <li> 
        <a class="" data-drupal-link-system-path="user" href="/drupal/photos">Photos</a> 
       </li> 
      </ul> 
</nav> 

verwendete ich Jquery Funktion der aktiven Klasse basierend auf der URL zu setzen. Verwenden Sie den folgenden Code.

Das eigentliche Problem ist, wenn auf die Unterseiten wie Todo/Page2 die aktive Klasse gegangen ist. http://localhost/drupal/todo ::: funktioniert gut, ist aber Unterseite wie

http://loclahost/drupal/todo/add 

Die Klasse gegangen nach dem Zugriff.

Bitte geben Sie mir Vorschläge zu diesem Problem.

Ich möchte alle Unterseiten too.after Die aktive Klasse Set todo/*

Answer 1

Sie können diese mit reinem CSS tun. Sie müssen class/id Ihrem Körperelement und Ihren nav li Elementen hinzufügen, und dann können Sie Kombinationen von ihnen in Ihrem css definieren, um hervorgehoben zu werden. Angenommen, dies ist Ihre html:

< body id="todo_body"> 
<nav id="getnav"> 
      <ul> 
       <li class="todo_dropdown"> 
        <a class="" data-drupal-link-system-path="user" href="/drupal/todo">Todo</a> 
       </li> 
       <li class="files_dropdown"> 
        <a class="" data-drupal-link-system-path="user" href="/drupal/files">Files</a> 
       </li> 
       <li class="photos_dropdown"> 
</body> 
        <a class="" data-drupal-link-system-path="user" href="/drupal/photos">Photos</a> 
       </li> 
      </ul> 
</nav> 
</body> 

Jetzt können Sie CSS wie weiter unten verwenden, um Stile anwenden, um Ihre Hervorhebung li Element ‚sollte aktiv sein‘:

#todo_body .todo_dropdown, 
#files_body .files_dropdown, 
#photos_body .photos_dropdown 
{ 
    background-color: red; 
    color: white; 
    /*Your css styles for active nav item will come here */ 
} 

Sie auch hinzufügen Beliebige Stile für alle Elemente, die im should be active li-Element enthalten sind.

Answer 2

<ul class="nav"> 
        <?php 
          $page_name = basename($_SERVER['PHP_SELF']); 

        ?> 
        <!-- Main menu --> 
        <li class="<?php echo ($page_name=='dashboard.php')?'current':'';?>"><a href="dashboard.php"><i class="glyphicon glyphicon-home"></i> Dashboard</a></li> 

        <li class="submenu <?php echo ($page_name=='welcome_note.php' || $page_name=='corporate_profile.php' || $page_name=='introduction_of_the_township.php' || $page_name=='location_map.php')?'current open':'';?>"> 
         <a href="#"> 
          <i class="glyphicon glyphicon-list"></i> Masters 
          <span class="caret pull-right"></span> 
         </a> 
         <!-- Sub menu --> 
         <ul> 
          <li class="<?php echo ($page_name=='welcome_note.php')?'current':'';?>"><a href="welcome_note.php">Welcome Note</a></li> 
          <li class="<?php echo ($page_name=='corporate_profile.php')?'current':'';?>"><a href="corporate_profile.php">Corporate Profile</a></li> 
          <li class="<?php echo ($page_name=='introduction_of_the_township.php')?'current':'';?>"><a href="introduction_of_the_township.php">The Township</a></li> 
          <li class="<?php echo ($page_name=='location_map.php')?'current':'';?>"><a href="location_map.php">Location Map</a></li> 

         </ul> 
        </li> 
       </ul>