菜单选项卡内的图像

时间:2013-05-19 21:36:51

标签: javascript html css

我正在使用这个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>

提前致谢!

2 个答案:

答案 0 :(得分:0)

<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>

DEMO enter image description here

答案 1 :(得分:0)

你可以使用一些额外的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标记中抓取图片并将其放入标签而不是标题文字。

Demo

希望这能帮助你朝着正确的方向前进!