当我切换时，如何获得分区以彻底清除？

我试图有一个运行分屏的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

那捣鼓应该工作，有只是在函数声明中出错，忽略了大括号}，然后将JavaScript执行（使用'JavaScript'旁边的设备）作为<head>或<body>中的标记运行，但不确定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;"; 
    } 
});

显然，这只能用于两个元素，是非常程序。通常有人会使用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

当我切换时，如何获得分区以彻底清除？

回答

相关问题