Исходное меню активного бутстрапа при использовании разбивки на страницы

Question

Так что я использую Twitter Bootstrap 3 для создания моего front-end, в данном случае простого меню с вкладками. Я изо всех сил пытался заставить его работать, потому что ссылки в меню не хотели правильно выделяться, когда вы нажимаете на них. Под этим я подразумеваю, что если вы, например, нажмете на страницу about.php, эта ссылка должна быть помечена как активная, и поэтому на нее будет применен стиль CSS. Я видел много сообщений здесь о stackowerflow, но они только частично работали на меня. Например, некоторый код jQuery, который публикуют люди, будет делать правильное выделение, но будет препятствовать работе ссылок.

Наконец-то я нашел решение, которое отлично работает, за исключением случаев, когда я использую разбиение на страницы. Поясню:

Вот бутстраповский HTML код моего меню:

<nav class="row"> 
    <ul class="nav nav-tabs nav-justified"> 
     <li><a href="index.php"> Home </a></li> 
     <li><a href="about.php"> About Us </a></li> 
     <li><a href="contact.php"> Contact Us </a></li> 
     <li><a href="services.php"> Our Services</a></li> 
     <li><a href="portfolio.php"> Portfolio </a></li> 
    </ul> 
<nav> 

Для того, чтобы сделать подсветку меню работает Я использую этот javaScrpt код:

var url = window.location; 
// Will only work if string in href matches with location 
$('ul.nav a[href="' + url + '"]').parent().addClass('active'); 

// Will also work for relative and absolute hrefs 
$('ul.nav a').filter(function() { 
    return this.href == url; 
}).parent().addClass('active').parent().parent().addClass('active'); 

Так что, когда я начинаю приложение index.php отмечено как активное, и это здорово, если я нажму на about.php, я перейду на эту страницу, и он также будет отмечен как активный, и это тоже здорово. Но так как у меня есть разбиение на страницы на index.php, и я нажимаю ссылку Pagination 2, url изменится на: index.php? Page = 2, а выделение будет ломаться, index.php больше не будет помечен как активный.

Кто-нибудь знает, что здесь происходит, и что мы можем сделать, чтобы исправить это? Я не так хорош с JS.

Answer 1

Вместо того, чтобы с помощью window.location для URL, попробуйте использовать:

var url = window.location.pathname; 

Если текущий URL является www.mywebsite.com/index.php?page=2 выше Выведите /index.php.

Вы можете использовать url.replace('/', ''), чтобы избавиться от этой первой косой черты.

EDIT:

Поскольку ваш путь к файлу может иметь несколько частей, таких как /something/index.php мы должны иметь дело с этим. Другой способ сделать это:

var urlpath = window.location.pathname; 

В коде у вас есть:

$('ul.nav a[href="' + url + '"]').parent().addClass('active'); 

Вы можете изменить селектор:

$('ul.nav a[href="' + urlpath.split('/').pop() + '"]').parent().//...etc 

Это делает расщепление и выделение index.php за один раз. index.php, конечно, будет contact.php или whatever.php на других страницах.

Попробуйте JSFiddle Я только что создал, показывая выше линии в действии: http://jsfiddle.net/N9SHq/