Este artigo descreve o método de JavaScript para implementar a ativação atual da navegação na página. Compartilhe para sua referência. Os detalhes são os seguintes:
parte html (navegação referenciada, não disponível # em vez de links, o teste pode criar várias novas páginas estáticas)
<ul id = "nav"> <li> <a href = "/"> home </a> </li> <li> <a href = "/category/html-css/"> html/cios </a> </li> <li> <a href = "/categoria/javasscript/"> Javscrints <s> href = "/category/SEO/"> SEO </a> </li> <li> <a href = "/category/front-end/"> Front-end News </a> </li> </ul>
JavaScript Part (especifique a navegação da página atual com a classe .on adicionada)
$ (function () {var a1 = document.url; var a2 = $ ("#NAV A"); para (var i = 0; i <a2.length; i ++) {if (a1.indexOF ($ (a2 [i]). Att ("href")! = -1) {$ (a2 [i]). Parent (). addclass ("on"); retornar;}} $ (a2 [0]). Parent (). addclass ("on");})Parte do CSS (ajustes relevantes podem ser feitos de acordo com suas necessidades)
#Nav Li {Display: Inline-Block; Float: Esquerda; Texto-Alinhamento: Centro; Hight: 36px; Padding-Left: 4px; altura da linha: 36px; Background: URL (Images/Nav.gif) No-repetir o fundo do lado direito;}#Nav Li A {Display: Block: Color:#77; Li.on {Fonte-peso: Bold; Background: URL (imagens/Nav.gif) No-repetir 0 0; Margin-left: -3px;}#Nav Li.on A {Background: Url (imagens/Nav.gif) No-repetir à direita 0;}Espero que este artigo seja útil para a programação JavaScript de todos.