Question

我正在尝试创建一个导航栏，当导航栏中的链接处于活动状态时，它会动态地选择“活动”类 - 这将显示在单页网站上，所以我使用的是ID，这是我的HTML看起来像

<section class="screen1" id="home">

<div class="container">
    <div class="sixteen columns">
        <h1 class="hero-h1">Lorem Ipsum</h1>
        <h2 class="hero-h2">Lorem Ipsum</h2>
    </div>
</div>

<nav>
    <ul>
        <li><a href="#home">Home</a></li>
        <li><a href="#about">About Me</a></li>
        <li><a href="#services">Services</a></li>
        <li><a href="#blog">Blog</a></li>
        <li><a href="#contact">Contact Me</a></li>
    </ul>
</nav>

每个新的“屏幕”都是一个新页面，因此每个部分都是相同的，但现在有＃about，＃services等等，当我点击导航菜单中的链接或向下滚动页面时我想要它拿起我在CSS中创建的活动状态，并且在页面加载时我希望它已经处于主动状态（我的类在CSS中被称为活动状态）。

如何在单页网站上将#home更改为#about等等？有没有jquery，javascript或者我可以使用的东西？

Answer 1

您可以使用jQuery检测何时单击其中一个链接并将活动类添加到链接。这是使用click方法you can see the documentation here完成的。以下示例将active类添加到导航中单击的任何链接。

$("nav a").click(function() {

   // Remove the active class from the element that is currently active
   $(".active").removeClass("active");  

   // Add the active class to the element that was just clicked
   $(this).addClass("active");

   return false;
});

您可以将班级active添加到Home，以便在首次加载页面时处于有效状态。

Answer 2

这个小脚本使用jQuery并将活动类添加到任何被单击的链接，并从其他链接中删除活动类。这是非常基本的，但应该让你开始。

<script>
    $(document).ready(function () {
        $("nav a").click(function () {
            $("nav a").removeClass("active");
            $(this).addClass("active");
        });
    });
</script>

以下是一个示例：http://jsfiddle.net/by2c6/

Answer 3

您可以使用AngularJS框架。它可以让您在单个html页面中更新页面的一部分。我可以在我的github上给出一个例子： personal portfolio

动态地将“活动”状态添加到我的单页网站

3 个答案: