9

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

私が抱えている問題は次のとおりです。最初にウェブサイトにアクセスしたときにホームページが空白であると仮定します(私が望んでいる方法です)。「私たちについて」リンクをクリックしたとしましょう。突然、私たちについてのセクションが表示されます (私が望んでいた方法です)。ここで私が遭遇した問題は、「製品」リンクをクリックすると、「製品」コンテンツが表示され、「私たちについて」コンテンツが再び非表示になることです。(基本的に、同じページ内で新しいページを開くような錯覚を作成します)

これが私がこれまでに思いついたコードです。特定の div 要素を表示および非表示 (onclick) にすることはできますが、一度に div 要素を 1 つだけ表示する方法がわかりません。

<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();"> 製品

4

5 に答える 5

4

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

<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>
于 2013-03-26T12:05:56.890 に答える
2

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 を初めて使用する場合は、何が起こっているかを確認できるように、プログラム コードを見たい場合があります。

于 2010-11-23T22:26:45.163 に答える
1

これはまさに 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>
于 2010-11-23T22:16:15.180 に答える
1

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

    <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
于 2010-11-23T22:18:44.290 に答える
0

CSSdisplay:プロパティを使用する

要素が消える

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

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

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

ここにサンプル コードを投稿しました: jQuery: menus appear/disappear on click - V2

PS

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

于 2010-11-23T22:13:19.797 に答える