在页面加载时删除活动类答案

【问题标题】：Active class being removed on page load在页面加载时删除活动类
【发布时间】：2014-05-29 20:04:11
【问题描述】：

我正在尝试为导航项创建一个简单的活动类。这是导航。

<footer>
    <ul>
      <li>
        <a class="footer-link" href="#contact" data-scroll><span class="icon-chat">         </span>Contact</a>
      </li>
      <li>
        <a class="footer-link" href="#work" data-scroll><span class="icon-tools-2"></span>Work</a>
      </li>
      <li>
        <a class="footer-link" href="#services" data-scroll><span class="icon-briefcase"></span>Services</a>
      </li>
      <li>
        <a class="footer-link" href="blog.html"><span class="icon-pencil"></span>Blog</a>
      </li>
    </ul>
  </footer>

然后是js：

 $('a.footer-link').click(function() {
 $('a.footer-link').removeClass("active");
  return $(this).addClass("active");
 });

每次我将页面更改为 Blog 页面时 - 链接都处于活动状态，但页面一加载它就消失了。前三个a 都在同一个页面上，并保留在 博客页面 加载时会丢失的“活动”类。

有什么想法吗？

【问题讨论】：

你有没有预料到？
查看这篇文章 - stackoverflow.com/questions/23851413/…
活动类由处理 data-scroll 的 javascript (jQuery) 代码设置，该代码未为博客链接设置。因此，博客应该注册一个活动类，例如（伪:) if page == "blog" make Active element with href "blog.html"
@RokoC.Buljan 这应该是一个答案而不是评论。
@DerekS 欢迎您改进想法并发布答案。我没有来自 OP 代码的足够信息来直接查明真正的问题。

标签： javascript jquery html css

【解决方案1】：

你有没有尝试过这样的事情：

为每个页面的html正文设置一个类，例如

<body class="blog">/* Your HTML*/</body>

也许还有一个额外的类用于您的项目（如果您不想使用 ahref 选择器作为样式）

<a class="footer-link blog"> ... </a>

当您获得新页面时，您的全局 JS 辅助函数将检查要添加的内容。

(function () {

   var bodyClass = $('body').attr('class');

   switch (bodyClass) {
      case "blog":
         $('a.footer-link.body').addClass('active');
         break;
      default:
         /* other functions */
   };


})();

【讨论】：