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>

Answer 2

我认为这可以通过css依赖来实现。您可以使用css选择器#error-json + #error-xml { /*something here*/ }

Bootstrap有预构建的类来显示/隐藏元素。您可以在文档中找到这些类： http://getbootstrap.com/css/#helper-classes-show-hide

也许这个帖子有帮助： On a CSS hover event, can I change another div's styling?

为什么你不想使用javascript / jQuery添加所需的行为？

此致

Bootstrap按钮组显示/隐藏Div

2 个答案: