web-dev-qa-db-ja.com

Javascript / HTML-可視性の切り替え（別のdiv要素が表示されると自動的に1つのdiv要素が非表示になります）

基本的に私がやろうとしているのは、ホームページにすべてのコンテンツがあり、一度に表示できるのは一部のコンテンツだけであるWebサイトを作成することです。これを行うために私が読んだ方法は、可視性を切り替えることです。

私が抱えている問題は次のとおりです。最初にWebサイトにアクセスしたとき、ホームページが空白であると想定します（私が望む方法）。 「Aboutus」リンクをクリックしたとしましょう。突然、私たちについてのセクションが表示されます（私が望むように）。今私が遭遇した問題は、「製品」リンクをクリックすると、「製品」コンテンツを表示し、「会社概要」コンテンツを再び非表示にしたいということです。 （本質的に、同じページ内に新しいページを開くような錯覚を引き起こします）

これが私がこれまでに思いついたコードです。特定のdiv要素を表示および非表示（クリック時）にすることはできますが、一度に1つのdiv要素のみが表示されるようにする方法がわかりません。

<script type="text/javascript">
function toggleVisibility() {
document.getElementById("about").style.display = "";
if(document.getElementById("about").style.visibility == "hidden" ) {
    document.getElementById("about").style.visibility = "visible";
}
else {
document.getElementById("about").style.visibility = "hidden";
}
}
</script>

<script type="text/javascript">
function toggleVisibility1() {
document.getElementById("products").style.display = "";
if(document.getElementById("products").style.visibility == "hidden" ) {
    document.getElementById("products").style.visibility = "visible";
}
else {
document.getElementById("products").style.visibility = "hidden";
}
}
</script>

Javascriptを機能させるためのリンクは次のようになります。

<href = "＃" onclick = "toggleVisibility（）;">概要

<href = "##" onclick = "toggleVisibility1（）;">製品

javascriptjavascript-eventshtmltoggleclass
8
Corey K

ここに別の簡単な関数があります

<script type="text/javascript">
function toggle_visibility(id) {
   var e = document.getElementById(id);
   if(e.style.display == 'block')
      e.style.display = 'none';
   else
      e.style.display = 'block';
}
</script>
<a href="#" onclick="toggle_visibility('foo');">if you click here, #foo will change visibility</a>
<div id="foo">blablabla</div>
4
T.Todua

JQueryがなければ、次のようなことをしたいと思うでしょう。

<style type="text/css">
    .content {
        display: none;
    }
    #about {
        display: block;
    }
</style>

<script type="text/javascript">

    function toggleVisibility(selectedTab) {

         // Get a list of your content divs
         var content = document.getElementsByClassName('content');

         // Loop through, hiding non-selected divs, and showing selected div
         for(var i=0; i<content.length; i++) {
              if(content[i].id == selectedTab) {
                    content[i].style.display = 'block';
              } else {
                    content[i].style.display = 'none';
              }
         }

    }
</script>

<a href="#" onclick="toggleVisibility('about');">About</a>
<a href="#" onclick="toggleVisibility('products');"> Products</a>

<div id="about" class="content">About stuff here</div>
<div id="products" class="content">Product stuff here</div>

ここでの例： http://jsfiddle.net/frDLX/

jQueryを使用するとこれがはるかに簡単になりますが、JavaScriptを使い始めている場合は、プログラマティックコードを確認して、何が起こっているのかがわかるようにすることがあります。

2
Jeff B

これはまさにjqueryが簡単にするものです。あなたが達成しようとしていることのこの非常に単純な例を見てください：

<style type="text/css">
    .section {
        display: none;
    }
</style>
<script type="text/javascript">

    function toggleVisibility(newSection) {
        $(".section").not("#" + newSection).hide();
        $("#" + newSection).show();
    }
</script>

<a href="#" onclick="toggleVisibility('about');">About</a>

<a href="#" onclick="toggleVisibility('products');"> Products</a>

<div id="about" class="section">about section</div>
<div id="products" class="section">products section</div>
1
mmurch

簡単な解決策は次のとおりです。

    <script type="text/javascript">
    function toggleVisibility(divid) {
    if (divid="about"){
        document.getElementById("about").style.visibility = "visible";
        document.getElementById("products").style.visibility = "hidden";
    }
    else if (divid="products")
    {
        document.getElementById("products").style.visibility = "visible";
        document.getElementById("about").style.visibility = "hidden";
    }
    }
    </script>


< href="#" onclick="toggleVisibility('about');">About

< href="##" onclick="toggleVisibility1('products');"> Products
1
Websirnik

cSSを使用するdisplay:プロパティ

要素が消える

document.getElementById("products").style.display = "none";

要素が表示され、ブロックとして表示されます（divのデフォルト）

document.getElementById("products").style.display = "block";

ここにサンプルコードを投稿しました： jQuery：メニューはクリックすると表示/非表示になります-V2

PS

ここでは、表示と可視性の違いに関する優れた例を見つけることができます： http://wiw.org/~frb/css-docs/display/display.html

0
atlavis