更改按钮样式答案

【问题标题】：Change button style更改按钮样式
【发布时间】：2013-05-21 21:44:38
【问题描述】：

我有三个按钮和三个面板。我单击按钮 panel1 仅在当时加载，panel2 和 3 是不可见的。如果我单击 button2 panel2 加载，panel1 和 3 是不可见的。我想改变我的按钮样式，如 tabcontainer tabs.这三个按钮喜欢显示tabs.asp.net在css中可以吗？

【问题讨论】：

为了让大家帮到你，需要发布相关的html/css/js
当然可以。
可以使用 jquery 或 javascript
api.jquery.com/show & api.jquery.com/hide
如果你知道 css 编码意味着请帮助我，以及如何调用按钮？这 3 个按钮喜欢在 tabcontainer 中显示选项卡。有可能吗？回复我

标签： jquery asp.net css

【解决方案1】：

你可以使用Togglable tabs的概念

<link href="assets/css/bootstrap.css" rel="stylesheet">
<link href="assets/css/bootstrap-responsive.css" rel="stylesheet">
<script src="http://code.jquery.com/jquery-1.9.1.js"></script>
<script src="assets/js/bootstrap-transition.js"></script>
<script src="assets/js/bootstrap-tab.js"></script>
<script>
$('#panel a').click(function(e) {
  e.preventDefault();
  $(this).tab('show');
})

// first active
$('#panel a:first').tab('show');
</script>

<div class="tabbable">
<ul id="panel" class="nav nav-tabs">
  <li><a href="#button1" data-toggle="tab">Button 1</a></li>
  <li><a href="#button2" data-toggle="tab">Button 2</a></li>
  <li><a href="#button3" data-toggle="tab">Button 3</a></li>
</ul>
<div class="tab-content">
  <div class="tab-pane fade in active" id="button1">
     You have click button 1 and show a panel 1 </div>
  <div class="tab-pane fade in " id="button2">You have click button 2 and show a panel 2</div>
  <div class="tab-pane fade in " id="button3">You have click button 3 and show a panel 3 </div> 
</div>

这里是演示：jsfiddle

【讨论】：