3

Webページの非表示要素を切り替えるこの単純な関数があります。

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 として保存して、ブラウザーで開きます。3 つのテーブルがあり、それぞれの上にボタンがあります。ボタンをクリックすると、そのテーブルが表示され、他のすべてのテーブルが非表示になります。さらにテーブルが必要な場合は、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 要素を選択し、それらの display 属性を「none」に設定してから、表示する必要がある要素のみを表示できます。

もう 1 つの方法は、変数内の可視要素を追跡することです。

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();

これにより、 classtoggle_elementを持つすべての要素が非表示になり、 id を持つ要素が表示されidます。

JSFiddle の例はこちら。

于 2012-08-04T08:05:16.263 に答える