Question

我有一堆页面，当我切换页面时我希望课程主动更改

<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的新手，你能帮助我吗？并且doest每个页面都有该脚本吗？

Answer 1

每个页面只包含您放在其上的脚本。我建议将脚本编成自己的脚本/文件，然后将其包含在所有页面中。

您可以使用docker-compose run获取当前页面的网址。然后你可以编写一些逻辑来为列表中的任何元素添加window.location.href类或其他内容与当前URL匹配。

Answer 2

// 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，在html页面中包含.js文件并更改变量。（阅读我发表的评论）

Answer 3

您可以使用Bootstrap构建导航栏。它将使用<li>类设置active个元素的样式。将其包含在HTML文件的开头：

<!-- 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

多页链接活动

3 个答案: