Intereting Posts

javascript – класс обновления на основе URL

! Последнее, что я пробовал. Я помещаю его в свой 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 });