Question

我试图让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';
 }

Answer 1

这个小提琴应该有效，你的函数声明中只有一个错误，缺少右括号}，然后更改JavaScript执行（使用'JavaScript'旁边的齿轮）作为标记运行<head>或<body>，不确定为什么onLoad不在那里工作。

Answer 2

这样的事情可以解决问题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这样的框架来构建模块化组件。

Answer 3

这很简单。 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>

当我切换时，如何让Div完全清除？

3 个答案: