Question

我正在研究Drupal 8网站。因为我在向导航列表元素分配活动类时遇到问题。我使用以下代码来设置活动类，它适用于相同的URL。代码看起来像这样

 <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>

我使用jquery函数根据url设置活动类。使用以下代码。

 function setActive() {
     var myurl =window.location.href.substr(window.location.href.lastIndexOf("/")+1);
       $("#getnav ul li a").each(function(){
        if($(this).attr("href") == '/drupal/'+myurl )
            $(this).addClass("active");
    });
}
     window.onload = setActive();

真正的问题是每当访问像todo / page2这样的子页面时，活动类就会消失。 http://localhost/drupal/todo :::工作正常，但在访问

之类的子页面后

 http://loclahost/drupal/todo/add

课程已经消失。

请就此问题向我提出建议。

我想将Active类设置为所有子页面。在todo / *

之后

Answer 1

您可以使用纯CSS执行此操作。您需要将class/id添加到您的body元素和nav li元素，然后您可以在css中定义它们的组合以突出显示。例如，假设这是你的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>

现在，您可以使用下面给出的css将突出显示样式应用于'should be active'li元素：

#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 */
}

您还可以向should be active li元素中包含的任何元素添加任何样式。

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>

如果元素有一些子页面，如何添加活动类导航元素？

2 个答案: