Question

我的导航如下：

    <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可以在服务器上运行。为什么会这样？感谢

Answer 1

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

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

预防措施：

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

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

当您引入新的更改并希望将其推送到网上时，您可以更改版本号?v=2。这可以保证您的浏览器始终请求CSS文件，而不是抓取缓存存储的版本。

动态改变风格

1 个答案: