Question

如果你有类似的风格。

body { 
    background: url(img01.jpg) no-repeat center center fixed; 
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover;
}

你有这样的按钮

<div id='1'>
<input type='button' onclick="div_funkcija(1);" value="Answer"> 
</div>

<div id='2'>
<input type='button' onclick="div_funkcija(2);" value="Answer 2"> 
</div>

如果你使用这个js函数

function div_funkcija($div)
            {
                document.getElementById($div).style.display='none';
                document.getElementById($div+1).style.display='block';
            }

所以在按钮上单击它会隐藏div1并显示div2。

如何使div1的样式体具有此图像作为背景“img01.jpg”，而div2的样式体具有背景图像“img02.jpg”

你明白我的问题吗？

Answer 1

这是一个快速的jsfiddle：http://jsfiddle.net/EhHr4/

使用Javascript：

var d1, d2;

d1 = document.getElementById("1");
d2 = document.getElementById("2");

d1.addEventListener("click", function() {
  // toggle display
  d2.style.display = "block";
  d1.style.display = "none";        
});

d2.addEventListener("click", function() {
  d1.style.display = "block";
  d2.style.display = "none";
});

d1.setAttribute("class", "background1");
d2.setAttribute("class", "background2");

HTML：

<div id='1'>
  <input type='button' value="Answer"/>
</div>

<div id='2'>
  <input type='button' value="Answer 2"/>
</div>

CSS：

.background1 {
   background: url(img01.jpg) no-repeat center center fixed; 
}

.background2 {
   background: url(img01.jpg) no-repeat center center fixed; 
}

如需更多帮助，请在问题中提供更清晰的信息......

单击更改元素样式

1 个答案: