当href =“ page-link”给出时，活动菜单不起作用，但当我设置href =“＃”时，它起作用

Question

当href = "page-link"时，活动菜单不起作用，但是当我设置href = "#"时，它起作用

 $(document).ready(function() { $('ul li a').click(function() { $('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> 

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将内容加载到单个页面（称为“单页应用”）中或通过保存来纠正此问题链接的URL在localstorage中，并具有一些可在加载时运行的jQuery，以获取具有该URL的链接el并将其赋予.cap类。 只是一些想法可以借鉴。