单击其他按钮时如何删除背景图像？

Question

我有4个链接：

<tr class="imglinks">
    <td id="tab-title-1" class="button">
        <a href="#" class="tb_label" onclick="onShowTab(1)"><img src="form_includes/room-button_01.png"/></a>
    </td>

    <td id="tab-title-2" class="button">
        <a href="#" class="tb_label" onclick="onShowTab(2)"><img src="form_includes/room-button_02.png"/></a>
    </td>

    <td id="tab-title-3" class="button">
        <a href="#" class="tb_label" onclick="onShowTab(3)"><img src="form_includes/room-button_03.png"/></a>
    </td>

    <td id="tab-title-4" class="button">
        <a href="#" class="tb_label" onclick="onShowTab(4)"><img src="form_includes/room-button_04.png"/></a>
    </td>
</tr>

当我点击每个图像时，它会用pressed.png替换背景图像，但是当我点击另一个图像时，背景图像会保留在第一个图像上。

处理背景的JavaScript是：

function onShowTab(index) {
    var numberTabs = 4;
    for (var i = 1; i < (numberTabs + 1); i++) {

        var tabTitle = document.getElementById('tab-title-' + i);
        tabTitle.style.backgroundColor = "";
        tabTitle.style.borderBottom = "";

        var tabSheet = document.getElementById('tab-sheet-' + i);
        tabSheet.style.display = "none";
    }

    var tabTitle = document.getElementById('tab-title-' + index);
    tabTitle.style.background = "#f3f3f3 url('form_includes/pressed.png') no-repeat right top"
    tabTitle.style.borderBottom = "0px";

    var tabSheet = document.getElementById('tab-sheet-' + index);
    tabSheet.style.display = "block";

}

我的总体目标是将图像背景更改为按下的图像，从而指示您所在的部分。

Answer 1

在当前（单击）按钮上设置图像之前，您只清除所有图像的背景颜色。您还需要删除背景图像（或完整背景）。

对于您的信息：您可以使用带有类名选择器的document.querySelectorAll（）来一次获取所有按钮，而不是循环索引，并在每个按钮上执行getElementById（）。

Answer 2

function onShowTab(index) {
    var numberTabs = 4;
    for (var i = 1; i < (numberTabs + 1); i++) {
        if(index === i){
            var tabTitle = document.getElementById('tab-title-' + index);
            tabTitle.style.background="#f3f3f3 url('form_includes/pressed.png') no-repeat right top"
            tabTitle.style.borderBottom = "0px";
            var tabSheet = document.getElementById('tab-sheet-' + index);
            tabSheet.style.display = "block";
        }else{
            var tabTitle = document.getElementById('tab-title-' + i);
            tabTitle.style.backgroundColor = "";
            tabTitle.style.borderBottom = "";
            var tabSheet = document.getElementById('tab-sheet-' + i);
            tabSheet.style.display = "none";
        }
    }
}

以这种方式检查..

它会正常工作!!

Answer 3

您可以这样使用：您可以更改img标签的src。已修改

<script>
function changeSrc(el) {

    el.src = "home.png";

}
</script>
<div>
<img src="School.png" onclick="changeSrc(this)" alt="" /></div>

或者你可以点击：

 tabTitle.style.backgroundImage = "url("+newImage+")";