html mvc의 활성 탭 강조 표시 4

Question

내 탐색 탭을 강조 표시하려면 어떻게합니까? 나는 몇 시간 동안 다른 방식으로 시도해 왔지만 아무도 올바르게 작동하지 않습니다. 나는 거기에 액티브, 선택 등을 사용하는 것처럼 그것을 할 몇 가지 방법이 있지만 그냥 제대로 얻을 수 없다는 것을 알아요. 도와주세요.

다음은 탭 컨트롤의 일부 설정과 함께 내 CSS 파일에있는 코드입니다.

/* Tab Control */ 
#tabs ul 
{ 
    padding: 0px; 
    margin: 0px; 
    margin-bottom: 10px; 
    margin-left: 270px; 
    list-style-type: none; 
    } 
#tabs ul li 
{ 
    display: outline-block; 
    clear: none; 
    float: left; 
    height: 24px; 
} 
#tabs ul li a { 
    position: relative; 
    margin-top: 16px; 
    display: block; 
    width: 130px; 
    color: #6d6e71; 
    text-decoration: none; 
} 
#tabs ul li a:hover { 
    text-decoration: underline; 
    color: #eb8c00; 
} 
#tabs #Content_Area 
{ 
    margin-left: 270px; 
    padding: 0 15px; 
    clear:both; 
    overflow:hidden; 
    line-height:19px; 
    position: relative; 
    top: 20px; 
    z-index: 5; 
    height: 150px; 
    overflow: hidden; 
    } 

그리고 내 HTML 코드 : 당신이 상쾌한 페이지 앵커에없는 경우

<div id="tabs"> 
    <ul> 
     <li id="li_tab1" onclick="tab('tab1')"><a>Tab 1</a></li> 
     <li id="li_tab2" onclick="tab('tab2')"><a>Tab 2</a></li> 
    </ul> 
    <div id="Content_Area"> 
     <div id="tab1"> 
      <p>This is the text for tab 1.</p> 
     </div> 
     <div id="tab2" style="display: none;"> 
      <p>This is the text for tab 2.</p> 
     </div> 
    </div> 
</div> 

Answer 1

당신이 여기 JQuery와 를 사용하여 탭을 강조 할 수 클릭 한 다음 코드입니다 :

$('ul li').click(function(e){ 
e.preventDefault(); 
$(this).children().css('color','red'); 
$(this).siblings().children().css('color','black'); 
}); 

및 jsFiddle 예 : http://jsfiddle.net/338qH/