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>

デモ