我正在使用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