我有一个 Bootstrap 按钮组,其中有 2 个按钮(JSON 和 XML),加载页面时 JSON 处于事件状态。按 XML 按钮将自动将焦点更改到它。
现在,我想为这些按钮附加一些行为,以便单击 XML 按钮隐藏 error-json
pre 元素并显示 error-xml
pre元素。
是否有一种Bootstrap-native方法来完成此任务?
<div class="btn-group">
<button class="btn btn-default" autofocus="true">JSON</button>
<button class="btn btn-default">XML</button>
</div>
<pre id="error-json" class="hidden"><code class="language-json">{
"ErrorCode": STATUS_CODE,
"Description": ERROR_MSG
}</code></pre>
<pre id="error-xml"><code class="language-xml"><error>
<ErrorCode>STATUS_CODE</ErrorCode>
<Description>ERROR_MSG</Description>
</error>
</code></pre>
最佳答案
$("#error-xml").hide();
$(".btn").click(function () {
var id = $(this).attr("id");
if(id == "json"){
$(this).attr("autofocus",true).siblings().attr("autofocus",false);
$("#error-xml").hide();
$("#error-json").show();
}else{
$(this).attr("autofocus",true).siblings().attr("autofocus",false);
$("#error-json").hide();
$("#error-xml").show();
}
});
:focus{
outline: 1px solid blue;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.0.0/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<div class="btn-group">
<button class="btn btn-default" id="json" autofocus="autofocus">JSON</button>
<button class="btn btn-default" id="xml">XML</button>
</div>
<pre id="error-json" class="hidden"><code class="language-json">{
"ErrorCode": STATUS_CODE,
"Description": ERROR_MSG
}</code></pre>
<pre id="error-xml"><code class="language-xml"><error>
<ErrorCode>STATUS_CODE</ErrorCode>
<Description>ERROR_MSG</Description>
</error>
</code></pre>
关于html - Bootstrap 按钮组显示/隐藏 Div,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/43147775/