3

我有这个简单的功能，可以切换网页中的隐藏元素。

function showtable(id) 
 {
 if(document.getElementById(id).style.display == 'block')
  {
document.getElementById(id).style.display = 'none';
  }else{
document.getElementById(id).style.display = 'block';
}
 } 


<input type="button" value="Toggle" onclick="showtable('id');" />

这工作正常，但我想在每次单击按钮时关闭页面上的一些其他（表格）元素（具有某些 id）（除了正在切换的元素，无论是打开还是关闭）。

4

3 回答 3

5

您可以使用 jQuery，但如果您不想使用它；这是一个纯 JavaScript 示例。要查看它是如何工作的，请将其复制粘贴到文本文件中，将其保存为 test.htm 并在浏览器中打开它。它包含三个表格，每个表格上方都有一个按钮。单击按钮时，会显示该表，而隐藏所有其他表。如果您需要更多表，请给它们一个 id，并将它们的 id 添加到函数中的数组中：

var ids = ["redTable", "greenTable", "blackTable", "anotherTable"];

如果您还希望能够切换该表，它当然还需要一个按钮：

<input type="button" value="Toggle Green Table" onclick="showtable('anotherTable');" />

例子：

<!DOCTYPE html>
<html>
    <head>
        <script type="text/javascript">
            function showtable(id) {
                var ids = ["redTable", "greenTable", "blackTable"];
                for(var i = 0; i < ids.length; i++) {
                    if(ids[i] != id)
                        document.getElementById(ids[i]).style.display = "none";
                }
                document.getElementById(id).style.display = "block";
            }
        </script>
    </head>
    <body>
        <input type="button" value="Toggle Red Table" onclick="showtable('redTable');" /><br />
        <table style="width: 100px; height: 100px; background-color: red;" id="redTable">
            <tr>
                <td>redTable</td>
            </tr>
        </table>
        <input type="button" value="Toggle Green Table" onclick="showtable('greenTable');" /><br />
        <table style="width: 100px; height: 100px; background-color: green; display: none;" id="greenTable">
            <tr>
                <td>greenTable</td>
            </tr>
        </table>
        <input type="button" value="Toggle Black Table" onclick="showtable('blackTable');" /><br />
        <table style="width: 100px; height: 100px; background-color: black; display: none;" id="blackTable">
            <tr>
                <td>blackTable</td>
            </tr>
        </table>
    </body>
</html>
于 2012-08-04T08:25:15.247 回答
2

您可以选择所有其他 DOM 元素，将它们的显示属性设置为“无”，然后只显示应该可见的元素。

另一种方法是跟踪变量中的可见元素：

var visibleElement = null;

当您切换一个元素时，您将其设为可见元素并隐藏先前可见的元素：

// Hide the previously visible element, if any.
if (visibleElement != null)
{
    visibleElement.style.display = 'none';
}

// Make your new element the visible one.
visibleElement = document.getElementById(id)
visibleElement.style.display = 'block';
于 2012-08-04T07:58:22.593 回答
1

轻松使用jQuery。例如，给每个切换元素一个类toggle_element，然后在 JS 中：

$('.toggle_element').hide();
$('#id').show();

这将隐藏所有带有 class 的元素toggle_element并显示带有 id的元素id。

JSFiddle 示例在这里。

于 2012-08-04T08:05:16.263 回答