0 
<!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>
4

2 回答 2

2

您可以在 html 中包含新样式并使用 jquery 来监听可折叠滑块的点击事件，然后用于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');


});
于 2013-09-03T17:13:04.223 回答
1

您可以使用 jquery addclass() 函数

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

于 2013-09-03T17:08:54.887 回答