Выделить текущую ссылку Navbar?

-1

Обновление!Выделить текущую ссылку Navbar?

Я провел около 4 часов исследований и разработал мой код для работы без жестко закодированных каталогов/путей.

Идея состоит в том, что функция currentLinkFunction() вызывается из атрибута onload в теге <a>.

Приведенный ниже оператор if устанавливает исходный элемент полужирным, если местоположение страницы равно href в теге <a>.

function currentLinkFunction() { 
    if (window.location.pathname == window.event.srcElement.href.pathname) { 
     window.event.srcElement.style.fontWeight = "bold"; 
    } 
}

Это было предположение, но оно не работает.

Вот полная страница:

<head> 
    <meta charset="UTF-8"> 
    <title>Smith</title> 
    <link rel="stylesheet" type="text/css" href="resources/styles.css"> 
    <link href="https://fonts.googleapis.com/css?family=Muli" rel="stylesheet"> 
</head> 

<body> 
    <header> 
     <h1 class="site-title">Smith</h1> 
     <ul> 
      <li><a onload="currentLinkFunction()" class="nav-link" href="/index.html">Home</a></li> 
      <li><a onload="currentLinkFunction()" class="nav-link" href="#">About</a></li> 
      <li><a onload="currentLinkFunction()" class="nav-link" href="#">Portfolio</a></li> 
      <li><a onload="currentLinkFunction()" class="nav-link" href="#">Software</a></li> 
      <li><a onload="currentLinkFunction()" class="nav-link" href="#">Photograhpy</a></li> 
      <li><a onload="currentLinkFunction()" class="nav-link" href="#">Contact</a></li> 
     </ul> 
    </header> 
    <footer> 
     <h2 id="site-copywrite">Designed by <b>Smith</b></h2> 
    </footer> 
    <script type="text/javascript"> 
     function currentLinkFunction() {    
      if (window.location.pathname == window.event.srcElement.href.pathname) { 
       window.event.srcElement.style.fontWeight = "bold"; 
      } 
     } 
    </script> 
</body>

Оригинал сообщения:

Я пытаюсь установить стиль моей навигационной панели, что связь текущей страницы полужирным.

То, как я это делаю, вызывает функцию onload, которая устанавливает стиль, если href = index.html.

Вот мой JSFiddle

HTML

<ul> 
    <li><a onload="currentLinkFunction()" href="index.html">Home</a></li> 
    <li><a onload="currentLinkFunction()" href="#">About</a></li> 
    <li><a onload="currentLinkFunction()" href="#">Portfolio</a></li> 
    <li><a onload="currentLinkFunction()" href="#">Software</a></li> 
    <li><a onload="currentLinkFunction()" href="#">Photograhpy</a></li> 
    <li><a onload="currentLinkFunction()" href="#">Contact</a></li> 
</ul>

JavaScript

function currentLinkFunction() { 
    if (location.href == "index.html") { 
    location.style.fontWeight = "bold"; 
    } 
}

источник

2016-06-19 Smithy

Проблема в том, что скрипт вызывается для каждого элемент.

Решение состоит в том, чтобы использовать этот скрипт один раз и прокручивать каждый элемент класса nav-link.

var i = 0; 
var navLinkCount = document.getElementsByClassName("nav-link"); 

for (i; i < navLinkCount.length; i = i + 1) { 
    if (window.location.pathname === navLinkCount[i].getAttribute("href")) { 
     navLinkCount[i].style.fontWeight = "bold"; 
     navLinkCount[i].style.backgroundColor = "#E0E0E0"; 
    } 
}

Также оператор === должен быть использован при сравнении значений в этом сценарии.

источник

2016-06-19 22:52:04 Smithy

location.href возвращает полный URL.

Свойство href задает или возвращает весь URL текущей страницы.

_{http://www.w3schools.com/jsref/prop_loc_href.asp}

Вы ищете location.pathname.

Свойство pathname задает или возвращает путь к URL-адресу.

Заменить location.href с location.pathname.
location.style недействителен, так как location не является объектом DOM.Таким образом, вы можете добавить символ id или class по ссылке на index.html или вы можете найти объект с помощью Javascript, как показано ниже:

function currentLinkFunction() { 
 
    if (location.pathname == "index.html") { 
 
     document.querySelector('a[href="index.html"]').style.fontWeight = "bold"; 
 
    } 
 
    }

источник

2016-06-19 06:59:06

Спасибо, я никогда этого не знал. Это все еще не работает, есть ли проблема с тем, как я пытаюсь добавить стиль? – Smithy

Мое удовольствие .. Я обновил свой ответ. –

Дайте мне знать, если у вас возникли проблемы .. –

Выделить текущую ссылку Navbar?

ответ

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