我正在使用Twitter Bootstrap开发一个简单的网页。

在边栏上,我有3个按钮。每个按钮都调用一个函数来显示一个div并隐藏其他的div。

HTML代码类似于:

<div>
   <div class="row" id="general" style="display:none">
   Text1
   </div>
   <div class="row" id="medication" style="display:none">
   Text2
   </div>
   <div class="row" id="diet" style="display:none">
   Text3
   </div>
</div>


这是隐藏/显示DIV的JS函数之一:

 function showGeneral(){
        document.getElementById('general').style.display = 'block';
        document.getElementById('medication').style.display = 'none';
        document.getElementById('diet').style.display = 'none';
      }


我用@ChaoticNadirs答案更新了代码,但仍然无法正常工作。
Here is my code at Bootply

问题在于该功能正常运行,但是一旦完成,所有DIV都将再次隐藏(默认情况下)。

我觉得问题可能是由于Twitter Bootstrap框架而导致的。

有人解决这个问题吗?

最佳答案

Bootstrap提供了一个.hidden类。您可以使用此样式而不是显示样式来隐藏和显示元素。

检查此引导程序以获取示例:http://www.bootply.com/uY7kHe3Nw7

HTML:

<button class="btn btn-default" id="show-general">Show General</button>

<div>
   <div class="row hidden" id="general">
     Text1
   </div>
   <div class="row" id="medication">
     Text2
   </div>
   <div class="row" id="diet">
     Text3
   </div>
</div>


JS:

$("#show-general").on('click', showGeneral);

function showGeneral(){
        $('#general').removeClass('hidden');
        $('#medication').addClass('hidden');
        $('#diet').addClass('hidden');
      }


编辑:

在您的新示例中,您在<div>标记内单击触发事件。您可以执行以下操作来阻止默认操作:

JS:

$('#showGeneral').on('click', showGeneral);

function showGeneral(e){
    e.preventDefault();
    $('#general').removeClass('hidden');
    $('#medication').addClass('hidden');
    $('#diet').addClass('hidden');
    $('#workout').addClass('hidden');
}


这是一个新的引导:http://www.bootply.com/3RkAbPX6d0

10-05 20:52
查看更多