javascript - Bootstrap 忽略样式修改

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类(class)。您可以使用它而不是显示样式来隐藏和显示元素。

检查这个 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