! Последнее, что я пробовал. Я помещаю его в свой head.php, который я просто включаю. Я отправлю файлы, если вы захотите их увидеть лично. Каталог моей папки
Main_Folder -Main_files -- JS_Folder ---- Js Files -- Includes_Folder ---- Head.php is here <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> Вся боковая панель:
<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-briefcase"></i> <span>Employees</span> </a> </li> <li class="sub-menu"> <a href="javascript:;" class=""> <i class="icon-book"></i> <span>Students</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> <li class="sub-menu"> <a href="javascript:;" class=""> <i class="icon-pencil"></i> <span>Enroll</span> <span class="arrow"></span> </a> <ul class="sub"> <li><a class="" href="general.html">Foreign Languages</a></li> <li><a class="" href="button.html">ESL Local</a></li> <li><a class="" href="slider.html">Summer Workshops</a></li> </ul> </li> </ul> <!-- END SIDEBAR MENU -->
class="sub-menu"необходимо для сброса меню вниз. Таким образом, активная версия – этоclass="sub-menu active". В случае выпадающего меню уровня 2, как основной, так и суб-бар должны быть установлены на активное.
Это мой боковой бар.
<div class="collapse navbar-collapse navbar-ex1-collapse"> <ul class="nav navbar-nav side-nav"> <li> <a href="index.php"><i class="fa fa-fw fa-dashboard"></i> Overview</a> </li> <li> <a href="employee.php"><i class="fa fa-fw fa-dashboard"></i> Employees</a> </li> </ul> </div>
Я пробовал следующее ниже, но никто не работает по моему делу:
Обновить атрибут класса на основе URL-адреса страницы
https://css-tricks.com/snippets/jquery/add-active-navigation-class-based-on-url/
Первый пример кода
$('.menu li a').each(function(){ //check thru all <a> elements inside <li> inside .menu var pagename= location.pathname.split('/').pop(); // get current pages filename (just filename) if($(this).prop("href") == pagename){ $('.menu li').removeClass("active"); // remove all active class $(this).parent("li").addClass("active"); //put active in parent of <a> which is <li> } });
В первом я изменил меню, чтобы collapse navbar-collapse navbar-ex1-collapse и collapse только, но не работает.
Во втором примере кода я попытался сделать следующее:
$(function() { $('nav a[href^="/' + location.pathname.split("/")[2] + '"]').addClass('active'); });
Я положил [2] так как я сейчас в локальном хосте. Таким образом, это будет localhost/folder_name/index.php .
Я также попытался поставить "/index.php"/ но когда я нажимаю, он направляет меня на localhost/index.php вместо localhost/folder_here/index.php .
Третий пример кода
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('active'); } }); });
Все еще не работает. Я изменил $('ul a) на $('div ul a) и $('div li ul a) .
EDIT: Чтобы быть уверенным, созданный скрипт просто включается
include('js/js_file.js');, Эта строка должна быть до или после загрузки html?Как предложил Дэвид Томас, я попробовал следующее ниже. Но это не сработает.
var url = 'window.location.pathname'; $('.nav a').each(function() { // get the absolute URL from the <a> element: var href = this.href, // get the current page and file-type: pageAndFile = href.split('/').pop(); // if the location ends with the pageAndFile found in // the current <a> element (using String.prototype.endsWith()) // we add the 'active' class-name: if (url.endsWith(pageAndFile)) { $(this).closest('li').addClass('sub-menu active'); } });
Один подход:
// obviously, use 'document.location'/'window.location' in the real thing: var fakeLocation = 'http://www.example.com/index.php'; $('.nav a').each(function() { // get the absolute URL from the <a> element: var href = this.href, // get the current page and file-type: pageAndFile = href.split('/').pop(); // if the location ends with the pageAndFile found in // the current <a> element (using String.prototype.endsWith()) // we add the 'active' class-name: if (fakeLocation.endsWith(pageAndFile)) { $(this).closest('li').addClass('active'); } });
.active { border: 1px solid red; }
<link href="//maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css" rel="stylesheet" /> <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div class="collapse navbar-collapse navbar-ex1-collapse"> <ul class="nav navbar-nav side-nav"> <li> <a href="index.php"><i class="fa fa-fw fa-dashboard"></i> Overview</a> </li> <li> <a href="employee.php"><i class="fa fa-fw fa-dashboard"></i> Employees</a> </li> </ul> </div>
Предполагая, что location.pathname.split("/")[2] возвращает ожидаемый параметр, проблема
$('nav a[href^="/'
должно быть
$('.nav a[href^="'
.nav – это класс, а не элемент, в вашем примере
проблема в вашем скрипте ……
$(function() { $('.nav a[href^="' + location.pathname.split("/")[2] + '"]').addClass('active');t });