javascript - 菜单选项卡内的图像

Question

我正在使用这个 javascript 来制作一个带有 3 个标签的 div；http://www.barelyfitz.com/projects/tabber/（也许在那里看到css代码而不是在这里复制它更容易？）

无论如何，我想在选项卡内使用图像而不是默认使用的 H2 标题。那可能吗？

<div class="tabber">

 <div class="tabbertab">
   <h2>Tab 1 <img src doesn't work here></h2>
  <p>Tab 1 content.</p>
 </div>


 <div class="tabbertab">
  <h2>Tab 2</h2>
  <p>Tab 2 content.</p>
 </div>


 <div class="tabbertab">
  <h2>Tab 3</h2>
  <p>Tab 3 content.</p>
 </div>

提前致谢！

Answer 1

您可以使用一点点额外的 js/jQuery 代码，可能是这个方向的东西：

$(".tabbernav a").each(function(i){
    var $img = $("div.tabbertab:nth-child("+(i+2)+") h2 img")
    if($img.length > 0) $(this).html($img);
});

这将从您的h2标签中获取图像并将其放入选项卡而不是标题文本中。

演示

希望这可以帮助您朝着正确的方向前进！

Answer 2

<div class="tabber">

 <div class="tabbertab">
     <h2>Tab 1 <img src="http://slembassyusa.org/downloads/Flag_of_Sri_Lanka.png" width=100 height=20 /></h2>
  <p>Tab 1 content.</p>
 </div>


 <div class="tabbertab">
  <h2>Tab 2</h2>
  <p>Tab 2 content.</p>
 </div>


 <div class="tabbertab">
  <h2>Tab 3</h2>
  <p>Tab 3 content.</p>
 </div>

演示