Question

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" 

"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>

<script src="SpryAssets/SpryCollapsiblePanel.js" type="text/javascript"></script>
<script src="SpryAssets/SpryEffects.js" type="text/javascript"></script>
<link href="SpryAssets/SpryCollapsiblePanel.css" rel="stylesheet" type="text/css" />
<script type="text/javascript">
<!--
function MM_effectAppearFade(targetElement, duration, from, to, toggle)
{
    Spry.Effect.DoFade(targetElement, {duration: duration, from: from, to: to, toggle: toggle});
}
//-->
</script>
</head>

<body onload="MM_preloadImages('Backgrounds/Real Main Menu.png')">  
<div class="CollapsiblePanel" id="CollapsiblePanel1">
  <div class="CollapsiblePanelTab" tabindex="0">
    <p><center>
      <img src="Backgrounds/Main Menu.png" alt="Main Menu" width="624" height="97" id="Enter" onclick="MM_effectAppearFade(this, 2000, 100, 0, false)"/>
    </center></p>
  </div>
  <div class="CollapsiblePanelContent">
    <center>
      <img id="Background" src="Backgrounds/Title.png" width="100%" height="100%" alt="The website has not loaded properly due to your internet, sorry" />
    </center>
    <p>&nbsp;</p>
    <p>&nbsp;</p>
  </div>
</div>
<script type="text/javascript">
<!--
var CollapsiblePanel1 = new Spry.Widget.CollapsiblePanel("CollapsiblePanel1");
//-->
</script>
</body>
</html>

到目前为止，这是我的网站。我希望背景颜色为黑色（我可以这样做：P）。

然而，点击可折叠面板，我希望背景更改为图像，更具体地说，改为：

background: url('Backgrounds/Practise.png') no-repeat center center fixed;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
background-attachment: fixed;
background-image: url(Backgrounds/Practise.png);
overflow:hidden;

我已尝试过在本网站上找到的所有方法单击面板时会调用函数MM_effectAppearFade，因此我想在其中包含代码。

已编辑的代码无效

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" 

"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>

<style>
/*body {
    background: url('Backgrounds/Practise.png') no-repeat center center fixed;
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover;
    background-attachment: fixed;
    background-image: url(Backgrounds/Practise.png);
    overflow:hidden;
}*/
.newBackground{
background: url('Backgrounds/Practise.png') no-repeat center center fixed;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
background-attachment: fixed;
background-image: url(Backgrounds/Practise.png);
overflow:hidden;
}
</style>

<script src="SpryAssets/SpryCollapsiblePanel.js" type="text/javascript"></script>
<script src="SpryAssets/SpryEffects.js" type="text/javascript"></script>
<link href="SpryAssets/SpryCollapsiblePanel.css" rel="stylesheet" type="text/css" />
<script type="text/javascript">
<!--
function MM_effectAppearFade(targetElement, duration, from, to, toggle)
{
    Spry.Effect.DoFade(targetElement, {duration: duration, from: from, to: to, toggle: toggle});
}
//-->
</script>

<script type="text/javascript" src="http://code.jquery.com/jquery-latest.min.js"></script>
</head>

<script src="js/jquery.js">

$('.CollapsiblePanel').click(function(){

$('body').addClass('newBackground');

});
</script>

<body onload="MM_preloadImages('Backgrounds/Real Main Menu.png')">  
<div class="CollapsiblePanel" id="CollapsiblePanel1">
  <div class="CollapsiblePanelTab" tabindex="0">
    <p><center>
      <img src="Backgrounds/Main Menu.png" alt="Main Menu" width="624" height="97" id="Enter" onclick="MM_effectAppearFade(this, 2000, 100, 0, false)"/>
    </center></p>
  </div>
  <div class="CollapsiblePanelContent">
    <center>
      <img id="Background" src="Backgrounds/Title.png" width="100%" height="100%" alt="The website has not loaded properly due to your internet, sorry" />
    </center>
    <p>&nbsp;</p>
    <p>&nbsp;</p>
  </div>
</div>
<script type="text/javascript">
<!--
var CollapsiblePanel1 = new Spry.Widget.CollapsiblePanel("CollapsiblePanel1");
//-->
</script>
</body>
</html>

Answer 1

您可以在html中添加新样式并使用jquery将click事件收听到可折叠滑块，然后使用addClass()来实现新的背景css。

将css包含在你的html中，

<style>
.newBackground{
background: url('Backgrounds/Practise.png') no-repeat center center fixed;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
background-attachment: fixed;
background-image: url(Backgrounds/Practise.png);
overflow:hidden;
}
</style>

然后在你的jquery上这样做，

$('.CollapsiblePanel').click(function(){

$('body').addClass('newBackground');


});

Answer 2

您可以使用jquery addclass（）函数

http://api.jquery.com/addClass/

如何更改点击背景？

2 个答案: