Question

活动菜单在href = "page-link"时无效，但在我设置href = "#"

时有效

＆＃13;

$(document).ready(function() {
  $('ul li a').click(function() {
    $('li a').removeClass("cap");
    $(this).addClass("cap");
  });
});

＆＃13;

.logo-right ul li {
  display: inline-block;
  background: #0275d8;
  padding: 15px 0px;
  float: left;
}

.cap {
  background: #002752;
  border-radius: 3px;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="logo-right">
  <nav>
    <ul id="navi">
      <li><a class="cap" href="index">Home </a></li>
      <li><a href="govt-job">Govt Job</a></li>
      <li><a href="company-job">Company Job</a></li>
      <li><a href="bank-job">Bank Job</a></li>
      <li><a href="garments-job">Garments Job</a></li>
      <li><a href="others-job">Others Job</a></li>
      <li><a href="all-blog">Blog</a></li>
      <li><a href="general-knowledge">General Knowledge</a></li>
    </ul>
  </nav>
</div>

＆＃13;

Answer 1

嗯，这是工作，但它遵循链接。除非你在这个页面上设置了适当的el到.cap，否则它似乎不起作用。相反，我已经在下面的链接上禁用了默认行为，因此您可以看到它确实有效。

不确定你的问题到底是什么。

$(document).ready(function() {
  $('ul li a').click(function(evt) {
    // The ONLY line I added. Disables the link
    //  This is solely do demonstrate that 
    //  your code is working, just that it
    //  also follows that link.
    evt.preventDefault();
    
    $('li a').removeClass("cap");
    $(this).addClass("cap");
  });
});

.logo-right ul li {
  display: inline-block;
  background: #0275d8;
  padding: 15px 0px;
  float: left;
}

.cap {
  background: #002752;
  border-radius: 3px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="logo-right">
  <nav>
    <ul id="navi">
      <li><a class="cap" href="index">Home </a></li>
      <li><a href="govt-job">Govt Job</a></li>
      <li><a href="company-job">Company Job</a></li>
      <li><a href="bank-job">Bank Job</a></li>
      <li><a href="garments-job">Garments Job</a></li>
      <li><a href="others-job">Others Job</a></li>
      <li><a href="all-blog">Blog</a></li>
      <li><a href="general-knowledge">General Knowledge</a></li>
    </ul>
  </nav>
</div>

您可以通过在每个页面上的相应菜单el上手动粘贴该类来解决此问题，方法是禁用链接的正常行为，并通过ajax将内容加载到单个页面中（称为“单页面应用程序”），或者通过在localstorage中保存链接的url，并使用一些jQuery在加载时运行以获取具有该URL的链接el并为其提供.cap类。只是一些玩具的想法。

当href =＆＃34; page-link＆＃34;时，活动菜单不起作用但是当我设置href =＆＃34;＃＆＃34;

1 个答案: