Question

我有一个内部有两个div的div，我希望div A显示，另一个隐藏。默认我希望div A显示

<div id="0">
  <div id="A">this is A</div>
  <div id="B">this is B</div>
</div>

<div id="1">
  <button1>this is 1</button>
  <button2>this is 2</button>
</div>

与此分开是操作它的按钮。

以下是我使用javascript的地方：

$(document).ready(function() {   
$('.toggle').hide();
$('a.togglelink').click(function() {
    $('.toggle').hide();
    $(this).parent().next('.toggle').toggle();
    return false;
    });
});

Answer 1

EXAMPLE

<强> HTML

<div>
  <div id="divA" class="toggle">this is A</div>
  <div id="divB" class="toggle">this is B</div>
</div>

<div>
  <button value="divA">this is 1</button>
  <button value="divB">this is 2</button>
</div>

<强>的JavaScript

showHideDivs("divA");

$("button").on("click", function(){
    showHideDivs(this.value)
});

function showHideDivs(id){
    $(".toggle").hide();
    $("#" + id).show();
}

编辑：@ShowcaseImagery - 我意识到这个问题专门针对bootstrap而且我的解决方案更多是JS / jQuery实现。如果您需要类似功能并且使用bootstrap，则应查看collapse手风琴。 collapse文档应概述如何正确执行此操作。

Answer 2

div0和div1无效XHTML。我猜这就是问题所在。而是像这样使用id标记：

<div id="div0">YOUR STUFF HERE</div>
<div id="div1">MORE STUFF HERE</div>

切换隐藏javascript功能

2 个答案: