当元素有一些子页面时,如何添加活动类来导航 ul li
How to add active class to nav ul li a element when it has some sub pages with it?
我在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
班级不见了。
请给我关于这个问题的建议。
我也想将活动类设置为所有子页面。
您可以使用纯 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 将突出显示样式应用于您的"应该处于活动状态"的 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 元素中包含的任何元素添加任何样式。
<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>
相关文章:
- 将js添加到wordpress中以突出显示css活动菜单
- 如何在非活动时间后添加随机输入
- 我正在使用php includes来构建一个多页面网站.使用jquery,我将如何添加一个类"活动的”;添加到
- Fullcalendar-我们可以将自定义数据添加到我们的活动Json数据中吗
- 如果X与Y的href=匹配,则添加class'活动'-jQuery
- 在广告词脚本中添加活动选择器
- 如何根据活动锚点自动将类添加到链接中
- 添加'活动'类添加到主选项卡列表中
- 将“活动”类添加到父元素和子元素
- 如何使用 JavaScript 代码在活动 li 上添加类
- 为什么我的代码无法添加活动
- 如何制作<李>在刷新页面后添加活动的css类
- 添加活动菜单类
- 在用户滚动时为链接中的导航添加活动状态
- AngularJS:为li添加活动效果和悬停效果
- 向当前标题添加活动标题类
- 如何为Wordpress中的链接添加活动css类
- 如何使用YUI asyncRequests追溯性地向代码库添加活动AJAX请求检测
- 添加活动状态锚
- 流星和完整的日历包:我可以'不要在我的日历中添加活动