使用分頁時Bootstrap活動菜單突出顯示中斷

因此，我使用Twitter Bootstrap 3來構建我的前端，在本例中爲簡單的選項卡式菜單。爲了使它工作，我掙扎了很多，因爲菜單鏈接在點擊它們時不想正確突出顯示。我的意思是，如果你例如點擊about.php這個頁面，該鏈接應該被標記爲活動的，因此應用了一些CSS樣式。我在stackowerflow上看到很多帖子，但他們只爲我部分工作。例如，某些人發佈的jQuery代碼會做適當的突出顯示，但會阻止鏈接正常工作。使用分頁時Bootstrap活動菜單突出顯示中斷

最後，我發現一個解決方案，除了當我使用分頁時工作得很好。讓我來解釋：

這裏是我的菜單引導的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上分頁，並且我點擊分頁鏈接2 url會變成：index.php？page = 2，突出顯示會中斷，index.php不會被標記爲活動狀態。

有人知道這裏發生了什麼，我們能做些什麼來解決這個問題？我對JS不太擅長。

來源

2014-02-17 offline

這可能會幫助您正確http://stackoverflow.com/questions/6644654/parse-url-with-jquery解析URL -javascript – Charles380

我不知道如何可以幫助我... Oo – offline

而不是僅僅使用window.location爲您的網址，請嘗試使用：

var url = window.location.pathname;

如果您目前的網址是www.mywebsite.com/index.php?page=2上述應該輸出/index.php。

您可以使用url.replace('/', '')擺脫第一個斜線。

編輯：

由於您的路徑可能有多個部分，如/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/

來源

2014-02-17 19:34:36 Etzeitet

第一：路徑名返回：www.mywebsite.com/index.php。第二，爲什麼我應該刪除/？這是？頁= 2，這是我想的問題。我需要以某種方式動態地構建URL，以刪除之後發生的任何事情？並返回進行進一步處理。 – offline

什麼'alert（window.location.pathname）;'給你在你的頁面上？按照我在Chrome和Firefox中描述的方式工作。 – Etzeitet

您刪除'/'是因爲/ index.php與您的href屬性中的值不匹配。你有'href =「index.php」'沒有斜槓。您正在比較您的href中的網址和當前網址。由於查詢字符串引發了問題，因此使用'window.location.pathname'只會檢索url的那部分，它與您的href中的內容匹配。 – Etzeitet

使用分頁時Bootstrap活動菜單突出顯示中斷

回答

相關問題