Выделить текущую ссылку на страницу с помощью Javascript

-3

У меня возникла проблема выделить активный пункт меню на боковой панели с помощью Javascript. Поэтому я вызвал setPage() в том, чтобы выделить текущий пункт меню, но ничего не происходит. Любые идеи для его решения?Выделить текущую ссылку на страницу с помощью Javascript

Btw, вот мой код:

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: active ... –

: active активен только во второй ур мыши. –

Почему вы хотите использовать Pure JS? Почему вы не можете использовать jQuery? –

Это не language, но type, это ваша первая ошибка (хотя это могло бы работать, это не правильно в соответствии со стандартами.

Для установки ссылки активное состояние, получить по элементу anchor (<a>) и добавить класс active . к ней, что должно работать, как вы уже определили стиль для активной ссылки, я думаю, что должно работать, как сейчас

Ваш есть 2 проблемы в setPage функции:.

if (hrefString = document.location.href)

Символ = означает присвоение значения, используйте == или === для сравнения. Я действительно рекомендую ===, потому что он буквально сравнивает 2 объекта, а только значение, как в случае с == сравнения.

Во-вторых, hrefString не задан перед этим оператором if (по крайней мере, не в коде, который вы предоставили), поэтому javascript будет вызывать ошибку и прекратить выполнение.

источник

2014-11-14 14:43:43

Выделить текущую ссылку на страницу с помощью Javascript

ответ

Смежные вопросы