我要归档的内容是：
如果我在主页隐藏所有按钮
如果我在 menu1 中打开按钮 menu1
如果我在菜单2 中打开按钮 menu2
样本工作： http://plnkr.co/edit/FygL9aUL1rzgElsx59Di?p=preview
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container">
<h2>Dynamic Tabs</h2>
<p>To make the tabs toggleable, add the data-toggle="tab" attribute to each link. Then add a .tab-pane class with a unique ID for every tab and wrap them inside a div element with class .tab-content.</p>
<ul class="nav nav-tabs">
<li class="active"><a data-toggle="tab" href="#home">Home</a></li>
<li><a data-toggle="tab" href="#menu1">Menu 1</a></li>
<li><a data-toggle="tab" href="#menu2">Menu 2</a></li>
</ul>
<div class="tab-content">
<div id="home" class="tab-pane fade in active">
<h3>HOME</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
</div>
<div id="menu1" class="tab-pane fade">
<h3>Menu 1</h3>
<p>Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
</div>
<div id="menu2" class="tab-pane fade">
<h3>Menu 2</h3>
<p>Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam.</p>
</div>
</div>
</div>
<div class="pull-right menu1">
<button type="button" class="btn btn-default" data-dismiss="modal">Cancel</button>
<button type="button" class="btn btn-primary" data-dismiss="modal">Save</button>
</div>
<div class="pull-right menu2" style="display:none;">
<button type="button" class="btn btn-default" data-dismiss="modal">new</button>
<button type="button" class="btn btn-primary" data-dismiss="modal">delete</button>
</div>
答案 0 :(得分：2)
我认为最简单的方法是将标签上的data-target更改为类，而不是按ID更改单个元素。这样每个标签就会控制多个tab-pane目标。
演示 - http://www.codeply.com/go/ZnZXMlyfaF
<div class="container">
<h2>Dynamic Tabs</h2>
<p>To make the tabs toggleable, add the data-toggle="tab" attribute to each link. Then add a .tab-pane class with a unique ID for every tab and wrap them inside a div element with class .tab-content.</p>
<ul class="nav nav-tabs">
<li class="active"><a data-toggle="tab" data-target=".home" href="#">Home</a></li>
<li><a data-toggle="tab" data-target=".menu1" href="#menu1">Menu 1</a></li>
<li><a data-toggle="tab" data-target=".menu2" href="#menu2">Menu 2</a></li>
</ul>
<div class="tab-content">
<div id="home" class="home tab-pane fade in active">
<h3>HOME</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
</div>
<div id="menu1" class="menu1 tab-pane fade">
<h3>Menu 1</h3>
<p>Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
</div>
<div id="menu2" class="menu2 tab-pane fade">
<h3>Menu 2</h3>
<p>Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam.</p>
</div>
</div>
</div>
<div class="container tab-content">
<div class="pull-right home tab-pane">
<!-- empty show nothing -->
</div>
<div class="pull-right menu1 tab-pane">
<button type="button" class="btn btn-default" data-dismiss="modal">Cancel</button>
<button type="button" class="btn btn-primary" data-dismiss="modal">Save</button>
</div>
<div class="pull-right menu2 tab-pane">
<button type="button" class="btn btn-default" data-dismiss="modal">new</button>
<button type="button" class="btn btn-primary" data-dismiss="modal">delete</button>
</div>
</div>