1

我想使用按钮单击更改 div 的内容，在另一次单击中我想将旧内容带回 div 我正在使用按钮的图像...

我的 div 代码如下

<div class="pic-container" style="position:absolute; left: 3px; top: 102px;">
<div class="pic-row" >
<img src="images/A.Png" />
<img src="images/B.Png" />     
<img src="images/C.Png" />
<img src="images/D.Png" />
<img src="images/E.Png" />
<img src="images/F.Png" />
<img src="images/G.Png" />
<img src="images/H.Png" />   
<img src="images/I.Png" />
<img src="images/J.Png" />  
<img src="images/K.Png" />   
<img src="images/L.Png" />                    
<img src="images/M.Png" />
<img src="images/N.Png" />
<img src="images/O.Png" />
<img src="images/P.Png" />
<img src="images/Q.Png" />
<img src="images/R.Png" />                       
<img src="images/S.Png" />
<img src="images/T.Png" />
<img src="images/U.Png" />
<img src="images/V.Png" />              
<img src="images/W.Png" />                              
<img src="images/X.Png" />
<img src="images/Y.Png" /> 
<img src="images/Z.Png" />
</div>
</div>
<img  style="position:absolute; left: 272.5px; top: 647px; width: 171px; height: 122.5px;" src="images/Btn_Lower.png"  id="image1" />

请帮我解决这个问题

4

1 回答 1

4

我不想通过解决你的问题来混淆你，而是想给你一个简短的例子。

仅使用需要 javascript 的 HTML 是无法实现的。所以这里有一个方法。

1）当你说内容时，它在javascript中被称为innerHTML 。

2）我想你知道onclick，它被称为点击事件。与此类似，您在 javascript 中有很多不同的事件，用于按键、双击等，

3）希望你知道ID，称为唯一选择器。其他选择器，例如class，您可以使用 HTML5 data-attributes。

4）要选择一个元素，在JS中你可以使用不同的方法，比如，

document.getElementById         // select element based on Unique ID
document.getElementsByClassName // select element based on class
document.getElementsByTagName   // select element based on Tag name

如果您有兴趣了解有关 javascript 的更多信息，请参阅Mozilla Developers Network

这是我想向您展示的镜头示例。

HTML： 

<div id="divd">First</div>
<button onclick='changeMe()'>Click It</button>

JS：

function changeMe() {
    var div = document.getElementById('divd').innerHTML;
    if (div === 'First') {
        document.getElementById('divd').innerHTML = "Second";
    } else {
        document.getElementById('divd').innerHTML = "First";
    }
}

演示

于 2013-08-03T06:36:50.267 回答