使用Javascript突出顯示當前頁面鏈接

-3

我有問題需要突出顯示使用Javascript的側邊欄中的活動菜單項。所以我調用了setPage（）來突出顯示當前菜單項，但沒有任何反應。任何想法來解決它？使用Javascript突出顯示當前頁面鏈接

順便說一句，這是我的代碼：

HTML：

<nav class="sidebar-nav"> 
    <a class="sidebar-nav-item" href="nav.html">Main page </a> 
    <a class="sidebar-nav-item" href="page2.html">Dummy page 2</a> 
    <a class="sidebar-nav-item" href="page3.html">Dummy page 3</a> 
    <a class="sidebar-nav-item" href="page4.html">Dummy page 4</a> 
    <script language="text/javascript">setPage()</script> 
</nav>

CSS：

* { 
    margin:0; 
    padding:0; 
} 
body { 
    background:#CCC; 
    font:140% "Times New Roman", Times, serif, Arial; 
    line-height:1.5; 
    font-weight:bold; 
} 

.sidebar-nav { 
    border-bottom: 1px solid rgba(255,255,255,.1); 
} 
.sidebar-nav-item { 
    display: block; 
    padding: .5rem 1rem; 
    border-top: 1px solid rgba(255,255,255,.1); 
} 
.sidebar-nav-item.active, 
a.sidebar-nav-item:hover, 
a.sidebar-nav-item:focus { 
    text-decoration: none; 
    background-color: rgba(255,255,255,.1); 
    border-color: transparent; 
}

的Javascript：

function extractPageName(hrefString) { // This function is 
    var arr = hrefString.split('/'); 
    return (arr.length < 2) ? hrefString : arr[arr.length - 2].toLowerCase() + arr[arr.length - 1].toLowerCase(); 
} 

function setActiveMenu(arr, crtPage) { 
    for (var i = 0; i < arr.length; i++) { 
     if (extractPageName(arr[i].href) == crtPage) { 
      arr[i].className = "sidebar-nav-item active"; 
     } 
    } 
} 

function setPage() { 
    if (hrefString = document.location.href) 
     hrefString = document.location.href; 
    else 
     hrefString = document.location; 

    if (document.getElementsByClassName("sidebar-nav") != null) 
     setActiveMenu(document.getElementsByClassName("sidebar-nav-item"), extractPageName(hrefString)); 
}

對不起，我的英語不好。

來源

2014-11-14 Prasetyo Iman Nugroho

去與css屬性：活動... – 2014-11-14 14:34:29

：活動只在第二個烏拉圭回合鼠標是活躍的。 – 2014-11-14 14:35:37

爲什麼你要使用純JS？爲什麼你不能使用jQuery？ – 2014-11-14 14:36:09

這不是language，但type，這是你的第一個錯誤（雖然它可能工作，它不是按標準修正。

對於設置鏈接激活狀態，獲得根據anchor（<a>）元素，並添加active類。它應工作，你已經爲活動鏈接定義的樣式，我認爲應該工作，因爲它是現在

你有setPage功能2個問題：

if (hrefString = document.location.href)

=符號表示賦值，使用==或===進行比較。我真的推薦===，因爲它實際上比較了2個對象，而只是數值，與==比較的情況相同。

其次是hrefString在這個if語句之前沒有定義（至少不在你提供的代碼中），所以javascript會拋出錯誤並停止執行。

來源

2014-11-14 14:43:43

使用Javascript突出顯示當前頁面鏈接

回答

相關問題