如何在选项卡 header 部分创建带有图像的可切换选项卡？

Question

我正在尝试在选项卡 header 部分中创建一个包含图像的可切换区域。因此，如果我单击 header 中的第一张图片，它会显示一些内容。如果我单击该行中的下一个图像，它应该切换到下一个内容，依此类推。知道我应该如何开始吗？

我查看了 bootstrap 选项卡，但不确定如何使用它来解决我自己的问题。

Answer 1

看看这个：

<ul class="nav nav-tabs">
  <li class="active"><a data-toggle="tab" href="#home">Home</a></li>
  <li><a data-toggle="tab" href="#menu1"><img src="http://www.downloadsbyvita.com/images/video.jpg"/></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>Some content.</p>
  </div>
  <div id="menu1" class="tab-pane fade">
    <h3>Menu 1</h3>
    <p>Some content in menu 1.</p>
  </div>
  <div id="menu2" class="tab-pane fade">
    <h3>Menu 2</h3>
    <p>Some content in menu 2.</p>
  </div>
</div>

工作小提琴：http://jsfiddle.net/iamraviteja/ttpxoxob/1/

Answer 2

无法确切了解您的问题是什么，因为我们没有您的代码，但下面的内容可以帮助您。

$('.imgContent').hide();

$('.dataToggle').click(function() {

  $('.imgContent').hide();
  $("#" + $(this).data("img")).show();
});

li {
  display: inline;
  cursor: pointer;
}
.content {
  border: 1px solid #ccc;
  height: 30px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul>
  <li class="dataToggle" data-img="one">img 1</li>
  <li class="dataToggle" data-img="two">img 2</li>
  <li class="dataToggle" data-img="three">img 3</li>
</ul>
<div class="content">
  <div id="one" class="imgContent" style="display:block;">img one content</div>
  <div id="two" class="imgContent" style="display:none;">img two content</div>
  <div id="three" class="imgContent" style="display:none;">img three content</div>
</div>

如何在选项卡 header 部分创建带有图像的可切换选项卡？

How do I create togglable tabs with images in the tab header part?

html

javascript

css

tabs

toggle