如果 .active 类,JQuery 不会删除背景图像

标签 jquery css

我在使用 jquery 不删除背景图片时遇到问题。

我正在使用 Zurb's Foundation framework具有深层链接并具有这种形式的一些代码(我已经切掉了相当多的 html):

<div id="contentWrap">
  <section id="one" class="mixed">
    <a href="#">One</a>
    <div class="content"></div>
  </section>   
  <section id="two" class="mixed active">
    <a href="#">One</a>
    <div class="content"></div>
  </section>
</div>

我正在使用 css 设置带有背景图片的#contentWrap,但我只想在第一个链接处于事件状态时显示图片。

我正在使用这个 JQuery 代码:

// Add background image if #one clicked
$('#one a').click(function(){
  $("#contentWrap").css("background-image","url('xx.jpg')");
});

// Remove background image if #two clicked
$('#two a').click(function(){
  $("#contentWrap").css("background-image","none");
});

// Remove background image if #two has class of .active
if ( $("#two").hasClass("active") ) {
  $("#contentWrap").css("background-image","none")
};

如果页面加载时第二个选项卡通过深度链接处于事件状态(即 xx.com/#two),背景图像仍会加载。

我曾经有这个工作,但后来对代码在 (wordpress) 网站上的加载方式进行了多次更新,现在我正在使用 jQuery(document).ready(function($)包装所有其他 JS(正在运行)。

非常感谢任何帮助。

最佳答案

如果我没听错的话,当 two div 处于事件状态时,只有在那时才应该删除背景吗?

// Remove background image if #two clicked
$('#two a').click(function(){
   // Remove background image if #two has class of .active
    if ( $("#two").hasClass("active") ) {
      $("#contentWrap").css("background-image","none")
    };
});

工作 jsfiddle:(将 background-image 更改为 background) http://jsfiddle.net/Vvg5F/4/

关于如果 .active 类,JQuery 不会删除背景图像,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/19623082/

相关文章:

javascript - jQuery 流沙忽略溢出 :auto on animation

javascript - jQuery 通过 1 个按钮切换所有段落不起作用

由于未编辑指定的段落 ID,Javascript 函数无法正常运行

jquery - 在网格/ ListView 之间切换时的淡入和淡出过渡

jquery - jQuery错误重复功能

jquery - 拖放图像,返回错误的尺寸

javascript - RobinBrouwer WMD - 阅读基本 jQuery

css - 包含按钮的 Bootstrap 表没有响应

javascript - 为什么 IE8 在我的菜单栏和页面内容之间显示空白 GAP?

css - 在 CSS 中使段落响应