Question

这是我的代码，但不能正常工作......它将在页面刷新后删除活动类。

html代码

pack://siteoforigin:

Javascript代码

<div id="navbar" class="navbar-collapse collapse navbar-right">
  <ul class="nav navbar-nav">
    <li><a href="about-us.php">About us</a>
    </li>
    <li><a href="portfolio.php">Portfolio</a>
    </li>
    <li><a href="services.php">Services</a>
    </li>
    <li><a href="contact-us.php">Contact</a>
    </li>
    <li><a href="#">Blog</a>
    </li>
  </ul>
</div>

Answer 1

我创建了一个使用localStorage设置活动元素并在页面加载时保持活动的示例：

$('#navbar ul li a').click(function() {
  $('li a').removeClass("currunt");
  $(this).addClass("currunt");
  localStorage.setItem('active', $(this).parent().index());
});

var ele = localStorage.getItem('active');
$('#navbar ul li:eq(' + ele + ')').find('a').addClass('currunt');

fiddle

Answer 2

对于您当前的设置，似乎您不需要使用javascript来添加类，因为这些是没有下拉列表的直接链接，因此显然单击它们将重定向到另一个页面，类将被删除。没有JS的简单解决方案是这样的：

在您的链接中添加课程
相应地更改您的css以突出显示当前页面的链接

你的CSS会是这样的：

.about-body .about-link,
.portfolio-body .portfolio-link,
.services-body .services-link,
.contact-body .contact-link,
.blog-body .blog-link
{
    background-color: red; /* or other styles you have in your active class */
}

<div id="navbar" class="navbar-collapse collapse navbar-right">
    <ul class="nav navbar-nav">
      <li class="about-link"><a href="about-us.php">About us</a>
      </li>
      <li class="portfolio-link"><a href="portfolio.php">Portfolio</a>
      </li>
      <li class="services-link"><a href="services.php">Services</a>
      </li>
      <li class="contact-link"><a href="contact-us.php">Contact</a>
      </li>
      <li class="blog-link"><a href="#">Blog</a>
      </li>
    </ul>
    </div>

这里需要注意的一点是，您需要在每个页面上相应地设置正文类。例如您的about-us页面应在about-body标记上有body个类。希望这是有道理的。

Answer 3

您能确认是否在页面中加载了jquery吗？尝试在点击功能中添加console.log("item clicked")以查看其是否正在运行

相同的代码对我有用，我刚刚添加了这个css

.current {
  background-color: white;
  font:black;
  font-size:19px;
}

这是小提琴链接 https://jsfiddle.net/vigneshvdm/0w0rnx4x/

在javascript导航栏中加载页面后删除活动类

3 个答案: