탭 탭 호버에서 CSS 메뉴를 변환 나는 당신의 도움이 필요

Question

을 클릭 아래에 다음 코드를 수정할 수있는 방법

등, 그 사용자가 클릭 할 수있는 그들을 전환 탭 위에 마우스 반대 탭을 대신 사용 하시겠습니까? CSS의

http://jsfiddle.net/QA5Zp/

:

body{ 
    font : 12px/1.5 Helvetica, Arial serif; 
} 
.clearboth{ 
    clear:both; 
} 


#csstabs li{ padding:2px;} 

#csstabs{ position:relative; width:500px; height:290px; } 
#csstabs h3{ padding:5px; height:30px; text-align:center; cursor:hand; display:block;  font-size:16px; font-weight:bold; margin:0; 
border-top:1px solid #000; 
border-left:1px solid #000; 
border-right:1px solid #000; 
} 


.tabcontent{ 
    padding:10px 0 0 40px; 
    width:100%; 
    background:#fff; 
    border:1px solid #000; 
    position:absolute; 
    left:0; 
    top:40px; 
    height:230px; 
    display:block; 
    margin:0; 
} 


#tab1 .tabcontent{ 
    z-index:2; 
    background:#fff; 
} 
#tab1 h3{ 
    z-index:3; 
    width:150px; 
    position:absolute; 
    left:0; 
    top:0; 
    cursor:hand; 
    background:#fff; 
} 


#tab2 .tabcontent{ 
    z-index:1; 
    opacity:0; 
} 
#tab2 h3{ 
    width:150px; 
    position:absolute; 
    left:180px; 
    top:0; 
    cursor:hand; 
} 

#csstabs:hover h3, #tabs:focus h3, #tabs:active h3{ 
    background:none; 
    z-index:0; 
    } 

#csstabs:hover .tabcontent, #tabs:focus .tabcontent, #tabs:active .tabcontent{ 
    z-index:0; 
    opacity:0; 
    -webkit-transition : opacity .75s ease-in; 
    } 

#tab1:hover h3,#tab1:focus h3,#tab1:active h3{z-index:4;background:#fff;} 
#tab1:hover .tabcontent,#tab1:focus .tabcontent,#tab1:active .tabcontent{ z-index:3; background:#fff; opacity:1; -webkit-transition : opacity 2s ease-in;} 

#tab2:hover h3,#tab2:focus h3,#tab2:active h3{z-index:4;background:#fff;} 
#tab2:hover .tabcontent,#tab2:focus .tabcontent,#tab2:active .tabcontent{ z-index:3; background:#fff; opacity:1; -webkit-transition : opacity 2s ease-in;} 

Answer 1

당신만큼 당신이 적절한 목표를 알아내는 약간의 시간을 투자 할 금액으로 CSS 클릭 이벤트를 사용할 수 있습니다

몇 개의 태그를 더 추가 할 수 있습니다. CSS Click Events

Answer 2

당신은 JQuery와 http://jsfiddle.net/QA5Zp/1/

약간이 작업을 수행 할 수 있습니다 내가 마우스 오버에서 교체 한 다음

는 바이올린입니다 CSS는 active 이라는 이름의 클래스와 li JQuery의 작은 비트로 탭을 클릭 할 수있게 만들 수 있습니다.

JQuery와

$('.tabbox').on('click', function(){ 
    $('.tabbox').removeClass('active'); 
    $(this).addClass('active'); 
}); 

HTML

<div id="tab1" class="tabbox active"> 

CSS

 #tab2.active .tabcontent, #tab2:focus .tabcontent, #tab2:active .tabcontent { 
     z-index:3; 
     background:#fff; 
     opacity:1; 
     -webkit-transition : opacity 2s ease-in; 
    }