Question

我正在使用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框架的任何转换中。

有人怎么解决这个问题？

Answer 1

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

检查此bootply以获取示例：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>标记内的<a>点击中触发该事件。您可以执行以下操作来阻止默认操作：

JS：

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

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

Answer 2

您可能想尝试使用＆＃34;可见性＆＃34;属性... https://developer.mozilla.org/en-US/docs/Web/CSS/visibility你可以在这里阅读更多相关内容。

通常我将一个类应用于我想隐藏的元素。这样就可以防止使用内联样式。如果您不关心内联样式，您还可以使用jQuery的show（），hide（）或toogle（）方法。

我认为问题不在于Bootstrap。

Bootstrap忽略样式修改

2 个答案: