动态改变风格

时间:2013-06-28 23:16:17

标签: jquery css dynamic

我的导航如下:

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

1 个答案:

答案 0 :(得分:1)

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

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

预防措施:

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

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

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