トグル時にディビジョンを完全にクリアするにはどうすればよいですか？

分割画面を実行するdivを作成しようとしています。左のパネルには複数のリンクがあるので、私が使っている簡単なトグルは効果がありません。私は適切なdivをクリアし、次の選択されたリンクに置き換えることができる必要があります。（これに似た何か https://www.itriagehealth.com/conditions）今は、選択したリンクをスタックするだけです。トグル時にディビジョンを完全にクリアするにはどうすればよいですか？

私は私だけではCSSでこれを行うことはできません実現し、まだjavascriptので遊んでいますが、これは私がこれまで持っている概念です：

https://jsfiddle.net/od9bnez4/1/

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

出典

2016-07-05 Megan

_ "[J] ava"で遊んでいる_ - Javaを使用しているところでは見えません。 – Xufox

フィドルが動作する必要があること、あります関数の宣言にエラーがあり、閉じた括弧}がありません。または<body>のタグとして実行するようにJavaScriptの実行を（JavaScriptの横の歯車を使用して）変更します。なぜonLoadがそこで動作しないのかわかりません。このような

出典

2016-07-05 22:11:54

何かがトリックを行います、それのhttps://jsfiddle.net/od9bnez4/3/

の心は、この、

var left = document.getElementById("left"); 
var div1 = document.getElementById("div1"); 
var div2 = document.getElementById("div2"); 

left.addEventListener('click', function() { 
    if (div1.style.display == "none") { 
    div1.style = "display: block;"; 
    div2.style = "display: none;"; 
    } else { 
    div1.style = "display: none;"; 
    div2.style = "display: block;"; 
    } 
});

は明らかに、これは2つの要素だけのために働くと非常に手続きです。通常、誰かがこれのためにjQueryのようなものを使うでしょうし、モジュール化されたコンポーネントを作るためにAngularやReactのようなフレームワークも使用します。

出典

2016-07-05 22:18:32 joeyfb

これはかなり簡単です。 JQueryはより柔軟になります。

<!DOCTYPE html> 
    <html> 
    <head> 
    <script> 
    function toggle() 
    { 
     var e = document.getElementById('diva'); 
     var f = document.getElementById('divb'); 
     if (f.style.display == 'none') 
     { 
     e.style.display = 'none'; 
     f.style.display = 'block'; 
     } 
     else 
     { 
     f.style.display = 'none'; 
     e.style.display = 'block'; 
     } 
    } 
    function togglejquery() 
    { 
     if ($('#divb').css('display') == 'none') 
     { 
     $('#diva').hide(); // or slideUp('fast'); 
     $('#divb').show(); // or slideDown('fast'); 
     } 
     else 
     { 
     $('#divb').hide(); 
     $('#diva').show(); 
     } 
    } 

    </script> 
    </head> 

    <body onload="positionScreenBottom();"> 
    <div style="float:left; width:40%;"> 
    <a href='#' onclick='toggle();'>Show A</a><br/> 
    <a href='#' onclick='toggle();'>Show B</a><br/> 
    </div> 
    <div style="float:left; width:60%;"> 
    <div id='diva' style='float:left;'>Here is A</div> 
    <div id='divb' style='float:left; display:none;'>Here is B</div> 
    </div> 
    </body> 
    </html>

出典

2016-07-05 22:47:17

トグル時にディビジョンを完全にクリアするにはどうすればよいですか？

答えて

関連する問題