[英]update sidebar main-menu and sub-menu class based on url
I've asked this question here but another problem came up so I decided to keep the old one for reference purposes. 我在这里提出了这个问题,但是又出现了另一个问题,因此我决定保留旧的作为参考。 Old question here.
这里的老问题。
The old question was just about updating the class of a main-menu based on the url but now things have changed. 旧的问题只是基于URL更新主菜单的类,但是现在情况已经改变。 I will provide the new sidebar below.
我将在下面提供新的侧边栏。
Sidebar without any active class yet
侧栏尚无任何有效课程
<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>
It would look like this:
它看起来像这样:
Dashboard
Scheduling
--> Foreign Languages
--> ESL Local
--> Summer Workshops
As you can see Scheduling has a sub-menu. 如您所见,计划有一个子菜单。
Then how it would look like if I am on the dashboard.
如果我在仪表板上,那会是什么样子。 The sidebar would look like this
侧边栏看起来像这样
<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>
So the Dashboard would be highlighted in this scenario 因此在这种情况下仪表板将突出显示
And how it would look like if Im on any of the sub-menu under Scheduling
以及如果我在“计划”下的任何子菜单上显示Im
<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 [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>
<!-- END SIDEBAR MENU -->
</div>
Since I am in the Foreign Languages section. 由于我在“外语”部分中。 The main header
Scheduling
and this Foreign Langauges
would be active but different class. 主标题
Scheduling
和Foreign Langauges
来Foreign Langauges
将处于活动状态,但类别不同。 The active class of Scheduling is sub-menu active
while Foreign Languages would just have active
only. 日程安排的活动类别是
sub-menu active
而外语仅是active
。
And javascript that I've tried no longer applies here since it only handles menus without any dropdown. 我尝试过的javascript在这里不再适用,因为它只处理菜单,没有任何下拉菜单。 And it didn't work anyway
而且还是没用
Old javascript
旧的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>
The goal here is to put a "active" class to the section of the sidebar based on the url the user is in. I've just include('sidebar.php') this sidebar so I would only change this file rather than put a sidebar in each php page file. 这里的目标是根据用户所在的URL将“活动的”类放在侧边栏的部分。我只是在侧边栏include('sidebar.php'),所以我只更改此文件而不是放置每个php页面文件中的侧边栏。 But then the main heading and the dropdown menu has different active classes.
但是,主标题和下拉菜单具有不同的活动类。
Found the solution with the help of gecco. 在gecco的帮助下找到了解决方案。 The javascript is below:
JavaScript如下:
<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().closest("li").addClass('active'); //added this line to include the parent
$(this).parent().parent().closest("li").addClass('active');
}
});
});
</script>
I was already halfway with using php to do this HAHAHAHA. 我已经在使用php做到这一点了。 if current_url = db_page_url then put echo class=active.
如果current_url = db_page_url,则将echo class = active放置。 HAHAHA.
哈哈哈。
<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>
The only change I have done here is adding another line to your JS $(this).parent().parent().closest("li").addClass('active2'); 我在这里所做的唯一更改是在您的JS中添加了另一行$(this).parent()。parent()。closest(“ li”)。addClass('active2');
And here is my style sheet 这是我的样式表
.active2 > a{
color:red; //what ever the styles you want
}
OR 要么
You can do it without a style 你可以做到没有风格
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
}
});
});
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.