表行中带有链接的引导选项卡 tr答案

【问题标题】：Bootstrap Tabs with links in a table row tr表行中带有链接的引导选项卡 tr
【发布时间】：2016-12-14 03:00:17
【问题描述】：

我正在寻找一种使用引导选项卡的方法，如下所示：

我有一张桌子，我希望每一个都被点击一行，它会显示一张图片。

这可以实现吗？

引导代码如下，但我想将链接应用到一行''

div>

<!-- Nav tabs -->
<ul class="nav nav-tabs" role="tablist">
<li role="presentation" class="active"><a href="#home" aria-controls="home" role="tab" data-toggle="tab">Home</a></li>
<li role="presentation"><a href="#profile" aria-controls="profile" role="tab" data-toggle="tab">Profile</a></li>
<li role="presentation"><a href="#messages" aria-controls="messages" role="tab" data-toggle="tab">Messages</a></li>
<li role="presentation"><a href="#settings" aria-controls="settings" role="tab" data-toggle="tab">Settings</a></li>
</ul>

<!-- Tab panes -->
<div class="tab-content">
<div role="tabpanel" class="tab-pane active" id="home">SHOW IMAGE 1</div>
<div role="tabpanel" class="tab-pane" id="profile">SHOW IMAGE 2</div>
<div role="tabpanel" class="tab-pane" id="messages">SHOW IMAGE 3</div>
<div role="tabpanel" class="tab-pane" id="settings">SHOW IMAGE 4</div>
</div>

我想避免在 td 中应用它：

<td><a>....</a></td>

因为点击区域只会是文本，我希望它是行

希望你能帮到我

【问题讨论】：

标签： twitter-bootstrap-3 tabs bootstrap-tabs

【解决方案1】：

抱歉，我在您的 code snippet 中没有看到任何 TABLE。不太确定当用户点击 tr 时您希望如何弹出图像。

您可能对手风琴感兴趣。这是你的fiddle：

    <button class="accordion">Home</button>
    <div class="panel">
     <img>
    </div>
    <button class="accordion">Profile</button>
    <div class="panel">
     <img>
    </div>

【讨论】：