1

我的导航如下所示：

    <ul class="sf-menu" id="nav">
      <li><a href="index.html">Home</a></li>
      <li><a href="services.html">Services</a></li>
      <li><a href="aboutSP.html">Expertise</a></li>
      <li><a href="hcwh.html">Help</a> </li>
      <li><a href="contactus.html">Contact Us</a></li>
    </ul>

用于动态更改所选页面的菜单项颜色的 JQuery 是：

$('#nav li a').each(function(){
       var path = window.location.href;
       var current = path.substring(path.lastIndexOf('/')+1);
       var menu_item = $(this).attr('href');
       if(menu_item == current){
          $(this).addClass('active');
       };
    });

CSS 看起来像这样：

 ul#nav li a.active {
   color: #009CDE;
   text-shadow: none;
 }

 .active {
   color: #009CDE;
   text-shadow: none;
 }

我的问题：我需要第一种样式以便 jQuery 可以在本地工作，但我需要第二种样式以便 jQuery 可以在服务器上工作。为什么会这样？谢谢

4

1 回答 1

1

每当您遇到本地页面呈现和在线版本之间的差异时，解决问题的第一步是确保它不是浏览器缓存问题。

清除浏览器的缓存，然后重试。

预防措施：

您可以通过对 CSS 文件进行版本控制来防止在开发和暂存期间出现此问题：

<link rel="stylesheet" type="text/css" href="styles.css?v=1">

当您引入新的更改并希望将它们推送到网上时，您更改了您的版本号?v=2。这保证了您的浏览器总是在请求 CSS 文件而不是获取缓存存储的版本。

于 2013-06-28T23:34:33.123 回答