Question

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

<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都在同一页面上并保留“活动”类，当博客页面加载时，它会丢失。

有什么想法吗？

Answer 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 */
   };


})();

在页面加载时删除活动类

1 个答案: