Показать/скрыть изображения на основе выбора вкладки

Question

У меня есть вкладка, и мне сложно определить, как показывать/скрывать изображения в зависимости от выбранной вкладки. Когда страница загружает tab1 и img1, они видны. Когда я нажимаю на tab2 Я хочу, чтобы скрыть и показать Img1 img2 и т.д.

Этот пример показывает, что я до сих пор: http://jsfiddle.net/NbyXb/

Вот HTML:

<div id="tab-area" class="light"> 

    <div class="dummy" id="first"> 
     <input type="radio" name="pane" id="p1" /> 
     <div class="dummy" id="second"> 
      <input type="radio" name="pane" id="p2" /> 
      <div class="dummy" id="third"> 
       <input type="radio" name="pane" id="p3" /> 
       <div class="dummy" id="fourth"> 
        <input type="radio" name="pane" id="p4" /> 
        <div class="dummy"> 

         <ul class="tabs">      
          <li id="tab1"><span class="active" tabindex="1"></span><label for="p1">Tab1</label></li> 
          <li id="tab2"><span class="active" tabindex="1"></span><label for="p2">Tab2</label></li> 
          <li id="tab3"><span class="active" tabindex="1"></span><label for="p3">Tab3</label></li> 
          <li id="tab4"><span class="active" tabindex="1"></span><label for="p4">Tab4</label></li> 
         </ul> 

         <div class="tab-strip"></div> 

         <div class="panes-scroll"> 
          <div class="panes-items"> 
           <div id="pane1"> 
            <h2>Tab 1 area</h2>   
           </div> 

           <div id="pane2"> 
            <h2>Tab 2 area</h2> 
           </div> 

           <div id="pane3"> 
            <h2>Tab 3 area</h2> 
           </div> 

           <div id="pane4"> 
            <h2>Tab 3 area</h2> 
           </div> 
          </div> <!-- end of .panes-items --> 
         </div> <!-- end of .panes-scroll --> 
        </div> 
       </div> <!-- end #fourth --> 
      </div> <!-- end #third --> 
     </div> <!-- end #second --> 
    </div> <!-- end #first --> 
</div> <!--end of #tab-area--> 

<div class="images"> 
    <img id="tab1-img" src="images/img1.png"> 
    <img id="tab2-img" src="images/img2.png"> 
    <img id="tab3-img" src="images/img3.png"> 
    <img id="tab4-img" src="images/img4.png"> 
</div> 

Вот CSS :

#tab-area { 
    margin: 40px; 
} 

.dummy { 
    outline: none; /* For IE */ 
} 

input[name=pane] { display: none;} 

.tabs { 
    position: relative; 
    list-style: none; 
} 

.tabs li { 
    position: relative; 
    width: 100px; 
    height: 38px; 
    float: left; 
    font: bold 14px Arial, sans serif; 
    letter-spacing: 1px; 
} 

.tabs li:first-child { 
    margin-left: 30px; 
} 

.tabs li:last-child { 
} 

.tabs li .active:before { 
    content: ''; 
    position: absolute; 
    top: 40px; 
    left: -10px; 
    width: 10px; 
    height: 8px; 
} 

.tabs li .active:after { 
    content: ''; 
    position: absolute; 
    top: 40px; 
    left: 107px; 
    width: 10px; 
    height: 8px; 
} 

.tab-strip { 
    content: ''; 
    position: relative; 
    clear: both; 
    z-index: 1; 
    height: 10px; 
    width: 700px; 
} 

.panes-scroll { 
    width: 698px; 
    position: relative; 
    overflow: hidden; 
    border: 1px solid #aaa; 
    height: 250px; 
} 

.panes-items { 
    width: 2800px; 
    position: relative; 
    -webkit-transition: margin-left 500ms ease-in-out; 
    -moz-transition: margin-left 500ms ease-in-out; 
    -o-transition: margin-left 500ms ease-in-out; 
    -ms-transition: margin-left 500ms ease-in-out; 
    transition: margin-left 500ms ease-in-out; 
} 

.panes-items > div { 
    padding: 20px; 
    width: 660px; 
    height: 0; 
    font: 12px Arial, sans serif; 
    float: left; 
} 

.panes-items > div:first-of-type { height: auto; } 
.tabs li:first-child .active { display: block;} 

input[name=pane]:checked + .dummy .panes-items > div { height: 0; } 
input[name=pane]:checked + .dummy .tabs li .active { display: none;} 

#p1:checked + .dummy .panes-items { 
    margin-left: 0; 
} 
#p2:checked + .dummy .panes-items { 
    margin-left: -700px; 
} 
#p3:checked + .dummy .panes-items { 
    margin-left: -1400px; 
} 
#p4:checked + .dummy .panes-items { 
    margin-left: -2100px; 
} 

#p1:checked + .dummy .panes-items > div:nth-of-type(1) , 
#p2:checked + .dummy .panes-items > div:nth-of-type(2) , 
#p3:checked + .dummy .panes-items > div:nth-of-type(3) , 
#p4:checked + .dummy .panes-items > div:nth-of-type(4) { 
    height: auto; 
} 

#p1:checked + .dummy .tabs li:nth-child(1) .active, 
#p2:checked + .dummy .tabs li:nth-child(2) .active, 
#p3:checked + .dummy .tabs li:nth-child(3) .active, 
#p4:checked + .dummy .tabs li:nth-child(4) .active { 
    display: block; 
} 

#tab1-img { 
    display: block; 
} 
#tab2-img { 
    display: none; 
} 
#tab3-img { 
    display: none; 
} 
#tab4-img { 
    display: none; 
} 

Answer 1

Вы можете легко сделать это с немного JavaScript (JQuery быть конкретными)
JS:

$(function(){ 
    $('.tabs label').click(function(){ 
     $('.images img').hide(); 
     $('#tab'+($(this).parent('li').index()+1)+'-img').show(); 
    }); 
}); 

FIDDLE:http://jsfiddle.net/EZ33Y/1/ (я заменил изображения с реальными изображениями, поскольку оригинальные из них не сработал)

Кроме того, обратите внимание, что в общем случае даже язычки должны сами быть достигнуто через JavaScript. Это позволяет повысить совместимость с браузером и является стандартным методом выполнения действий.