Question

我在这里问过这个问题，但又出现了另一个问题，所以我决定保留旧问题以供参考。 Old question here.

旧问题只是根据网址更新主菜单的类，但现在情况发生了变化。我将在下面提供新的侧栏。

没有任何活动类的补充工具栏

String devices = "List of devices attached 192.168.56.101:5555 device";
String[] str = devices.split(' '); //spliting the string from space
System.out.println(str[4]);

看起来像这样：

<div class="sidebar-scroll">
  <div id="sidebar" class="nav-collapse collapse">
    <!-- BEGIN SIDEBAR MENU -->
      <ul class="sidebar-menu">
        <li class="sub-menu">
          <a class="" href="panel-admin.php">
          <i class="icon-dashboard"></i>
          <span>Dashboard</span>
          </a>
          </li>
        <li class="sub-menu">
          <a href="javascript:;" class="">
          <i class="icon-calendar"></i>
          <span>Scheduling</span>
          <span class="arrow"></span>
          </a>
            <ul class="sub">
            <li><a class="" href="admin-foreign.php">Foreign Languages</a></li>
            <li><a class="" href="admin-esl.php">ESL Local</a></li>
            <li><a class="" href="admin-workshop.php">Summer Workshops</a></li>
            </ul>
          </li>
      </ul>
    <!-- END SIDEBAR MENU -->
  </div>
</div>

如您所见，Scheduling有一个子菜单。

然后，如果我在仪表板上，它会是什么样子。侧边栏看起来像这样

Dashboard
Scheduling
--> Foreign Languages
--> ESL Local
--> Summer Workshops

因此，在此方案中将突出显示仪表板

如果Im在Scheduling
下的任何子菜单上，它会是什么样子

<div class="sidebar-scroll">
      <div id="sidebar" class="nav-collapse collapse">
        <!-- BEGIN SIDEBAR MENU -->
          <ul class="sidebar-menu">
            <li class="sub-menu [active]"> //without the []
              <a class="" href="panel-admin.php">
              <i class="icon-dashboard"></i>
              <span>Dashboard</span>
              </a>
              </li>
            <li class="sub-menu">
              <a href="javascript:;" class="">
              <i class="icon-calendar"></i>
              <span>Scheduling</span>
              <span class="arrow"></span>
              </a>
                <ul class="sub">
                <li><a class="" href="admin-foreign.php">Foreign Languages</a></li>
                <li><a class="" href="admin-esl.php">ESL Local</a></li>
                <li><a class="" href="admin-workshop.php">Summer Workshops</a></li>
                </ul>
              </li>
          </ul>
        <!-- END SIDEBAR MENU -->
      </div>
</div>

因为我在外语部分。主标题<div class="sidebar-scroll"> <div id="sidebar" class="nav-collapse collapse">  <ul class="sidebar-menu"> <li class="sub-menu"> <a class="" href="panel-admin.php"> <i class="icon-dashboard"></i> <span>Dashboard</span> </a> </li> <li class="sub-menu [active]"> <a href="javascript:;" class=""> <i class="icon-calendar"></i> <span>Scheduling</span> <span class="arrow"></span> </a> <ul class="sub"> <li [class="active"]><a class="" href="admin-foreign.php">Foreign Languages</a></li> <li><a class="" href="admin-esl.php">ESL Local</a></li> <li><a class="" href="admin-workshop.php">Summer Workshops</a></li> </ul> </li> </ul>  </div>和此Scheduling将处于活动状态但不同的类。调度的活动类为Foreign Langauges，而外语只有sub-menu active。

我尝试过的javascript不再适用于此处，因为它只处理没有任何下拉列表的菜单。 它无论如何都不起作用

旧javascript

active

这里的目标是根据用户所在的URL将“活动”类放到侧边栏的部分。我只是包含（'sidebar.php'）这个侧边栏所以我只会更改此文件而不是在每个PHP页面文件中放置侧边栏。但是主标题和下拉菜单有不同的活动类。

在gecco的帮助下找到了解决方案。 javascript如下：

<script type="text/javascript">
jQuery(function($) {
var path = window.location.href; // because the 'href' property of the DOM element is the absolute path
//alert($('ul a').length);
$('ul a').each(function() { 
    if (this.href === path) {
        $(this).addClass('sub-menu active');
    }
    //alert(this.href);
});
}); 
</script>

我已经中途使用php来做这个HAHAHAHA了。 if current_url = db_page_url然后将echo class = active。 HAHAHA。

Answer 1

<script type="text/javascript">
   jQuery(function($) {
   var path = window.location.href; // because the 'href' property of the DOM element is the absolute path

   $('ul a').each(function() { 
      if (this.href === path) {
          $(this).addClass('sub-menu active');
          $(this).parent().parent().closest("li").addClass('active2');
      }
   });
}); 
</script>

我在这里做的唯一改变是为你的JS添加另一行 $（这）.parent（）的父（）最接近（ “里”）addClass（ 'ACTIVE2'）;

这是我的样式表

.active2 > a{
    color:red; //what ever the styles you want
}

或

你可以没有风格

jQuery(function($) { var path = window.location.href; $('ul a').each(function() { if (this.href === path) { $(this).addClass('sub-menu active'); $( this ).parent().parent().closest("li").addClass('active2'); $('.active2 a:first').addClass('active'); //add the active class to the parent node } }); });

基于url更新侧边栏主菜单和子菜单类

1 个答案: