탭 탐색 메뉴 스타일을 찾으십니까?

Question

나는 이미지 탭에 대해 을 처리하는 탭 탐색 메뉴를 찾고 있습니다. 그래서 나는 이런 일이 : 나는 몇 JQuery와/CSS 것들을 시도

<div class="menu"> 

      <a href="#"> 
        <img src="images/Chrysanthemum.jpg" style="width:10%; height:10%" title="Chrysanthemum" /> 
      </a> 
      <a href="#"> 
        <img src="images/Desert.jpg" style="width:10%; height:10%" title="Desert" /> 
      </a> 
      <a href="#"> 
        <img src="images/Hydrangeas.jpg" style="width:10%; height:10%" title="Hydrangeas"/> 
      </a> 
      <a href="#"> 
        <img src="images/Jellyfish.jpg" style="width:10%; height:10%" title="Jellyfish" /> 
      </a> 
      <a href="#"> 
        <img src="images/Penguins.jpg" style="width:10%; height:10%" title="Penguins" /> 
      </a> 


     </div> 

을하지만 이미지가 포함 된 탭의 나에게 좋은 스타일을 제공 하나를 찾을 수 있습니까?

Answer 1

jQuery UI 탭을 사용해보십시오.

체크 아웃 http://jqueryui.com/demos/tabs/#default

의 코드는 데모 즉 내비게이션 항목을 교체합니다. 당신의 내용 등으로

<ul> 
    <li><a href="#tabs-1">Nunc tincidunt</a></li> 
    <li><a href="#tabs-2">Proin dolor</a></li> 
    <li><a href="#tabs-3">Aenean lacinia</a></li> 
</ul> 

... 이미지의

<ul> 
    <li> 
    <a href="#"><img src="images/Chrysanthemum.jpg" style="width:10%; height:10%" title="Chrysanthemum" /></a> 
    </li> 
    <li> 
    <a href="#"><img src="images/Desert.jpg" style="width:10%; height:10%" title="Desert" /></a> 
    </li> 
    <li> 
    <a href="#"><img src="images/Hydrangeas.jpg" style="width:10%; height:10%" title="Hydrangeas"/></a> 
    </li> 
    <li> 
    <a href="#"><img src="images/Jellyfish.jpg" style="width:10%; height:10%" title="Jellyfish" /></a> 
    </li> 
    <li> 
    <a href="#"><img src="images/Penguins.jpg" style="width:10%; height:10%" title="Penguins" /></a> 
    </li> 
</ul> 

크기를해야 귀하의 탭에 적합합니다.

희망을 이해할 수 있습니다. :)