html - Bootstrap 按钮组显示/隐藏 Div

Question

我有一个 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">&lt;error&gt;
  &lt;ErrorCode&gt;STATUS_CODE&lt;/ErrorCode&gt;
  &lt;Description&gt;ERROR_MSG&lt;/Description&gt;
&lt;/error&gt;
</code></pre>

Answer 1

$("#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">&lt;error&gt;
  &lt;ErrorCode&gt;STATUS_CODE&lt;/ErrorCode&gt;
  &lt;Description&gt;ERROR_MSG&lt;/Description&gt;
&lt;/error&gt;
</code></pre>