多个页面链接活跃

-1

页，我想通过这门课积极变化当我切换

页

<nav class="main-navi"> 
     <ul> 
      <li> 
       <a id="homeLink" href="index.html"> 
        Home 
        <span class="dot"></span> 
        <span class="corner"></span> 
       </a> 
      </li> 
      <li > 
       <a id="portfolioLink" href="portfolio_masonry.html"> 
        Portfolio 
        <span class="dot"></span> 
        <span class="corner"></span> 
       </a> 
      </li> 
      <li > 
       <a href="about.html"> 
        About 
        <span class="dot"></span> 
        <span class="corner"></span> 
       </a> 
      </li> 
      <li> 
       <a class="active" href="service.html"> 
        services 
        <span class="dot"></span> 
        <span class="corner"></span> 
       </a> 
      </li> 
      <li> 
       <a href="blog.html"> 
        Blog 
        <span class="dot"></span> 
        <span class="corner"></span> 
       </a> 
      </li> 
      <li> 
       <a href="contact.html"> 
        contacts 
        <span class="dot"></span> 
        <span class="corner"></span> 
       </a> 
      </li> 
     </ul> 
    </nav>

我知道这将需要JavaScript，但我太新手关于JavaScript的，你们可以帮我？并做每一个页面有脚本？谢谢你们

来源

2016-02-13 vandi

你将不得不在你的HTML文件的头部包含此自己写脚本。我会花一些时间，看看jQuery和一些jQuery食谱（为特定目标设计的小部分代码 - 像你的），看看它们离你有多近。从那里开始修补。 – akaphenom

// grab all elements with the classes dot and corner 
var all = document.getElementsByClassName(dot, corner); 

// if the url contains any of the below then we set the classname of dot and corner 
var contains = "example" 
var contains2 = "example2" 
var contains3 = "example3" 
var contains4 = "example4" 

function setclassname() { 
    if (window.location.href.indexOf(contains || contains2 || contains3 || contains4) > -1) { 
     // change newclassname to your preferred classname. 
     all.className = newclassname; 
    } 
}

将onclick添加到您的跨度，将.js文件包含在您的html页面中并更改变量。（阅读我放置的评论）

来源

2016-02-13 23:12:10 iSidle

每页只有脚本，你放在它上面。我建议采取脚本并制作自己的脚本/文件，然后将其包含在所有页面上。

您可以使用window.location.href获取当前页面的网址。然后你可以编写一些逻辑来添加一个active类或其他东西到列表中的任何元素匹配当前的URL。

来源

2016-02-13 23:01:29

你可以使用Bootstrap来建立一个导航栏。它将采用active类的<li>元素。

<!-- Latest compiled and minified CSS --> 
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" integrity="sha384-1q8mTJOASx8j1Au+a5WDVnPi2lkFfwwEAa8hDDdjZlpLegxhjVME1fgjWPGmkzs7" crossorigin="anonymous"> 

<!-- Optional theme --> 
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap-theme.min.css" integrity="sha384-fLW2N01lMqjakBkx3l/M9EahuwpSfeNvV63J5ezn3uZzapT0u7EYsXMjQV+0En5r" crossorigin="anonymous"> 

<!-- Latest compiled and minified JavaScript --> 
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js" integrity="sha384-0mSbJDEHialfmuBBQP6A4Qrprq5OVfW37PRR3j5ELqxss1yVqOtnepnHVP9aJ7xS" crossorigin="anonymous"></script>

getbootstrap.com

这里有一个演示引导导航栏：

<nav class="navbar navbar-default"> 
    <div class="container-fluid"> 
    <div class="navbar-header"> 
     <a class="navbar-brand" href="#">WebSiteName</a> 
    </div> 
     <ul class="nav navbar-nav"> 
     <li class="active"><a href="#">Home</a></li> 
     <li><a href="#">Page 1</a></li> 
     <li><a href="#">Page 2</a></li> 
     <li><a href="#">Page 3</a></li> 
    </ul> 
    </div> 
</nav>

codepen.io/anon/pen/KVbOvo

www.w3schools.com/bootstrap/bootstrap_navbar.asp

来源

2016-02-13 23:31:36 htcsml4792

多个页面链接活跃

回答

相关问题