突出顯示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/