带有链接的Bootstrap选项卡在表行TR中

Question

我正在寻找一种使用Bootstrap选项卡的方法：

我有一张桌子，我希望每行单击每个人，它将显示一个图像。

可以实现吗？

Bootstrap代码如下，但我想将链接应用于行''

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>

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

希望您能帮助我

Answer 1

对不起，我在代码段中看不到任何表。当用户单击tr。

时，不确定要如何弹出图像

您可能对手风琴感兴趣。这是您的小提琴：

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