定義選項卡的CSS規則

我只是想知道爲選項卡定義CSS規則的最佳方法。網上有很多方法，但我想以最有效的方式實現它。你如何去做這件事？我的代碼是在這裏：http://jsfiddle.net/mgd5P/定義選項卡的CSS規則

HTML

<ul id="tabs"> 
    <li><a href="#" title="tab1">TTS</a></li> 
    <li><a href="#" title="tab2">PMW</a></li> 
</ul> 

<div id="content"> 
    <div id="tab1">One - content</div> 
    <div id="tab2">Two - content</div> 
</div>

$(document).ready(function() { 
    $("#content div").hide(); // Initially hide all content 
    $("#tabs li:first").attr("id","current"); // Activate first tab 
    $("#content div:first").fadeIn(); // Show first tab content 

    $('#tabs a').click(function(e) { 
     e.preventDefault();   
     $("#content div").hide(); //Hide all content 
     $("#tabs li").attr("id",""); //Reset id's 
     $(this).parent().attr("id","current"); // Activate this 
     $('#' + $(this).attr('title')).fadeIn(); // Show content for current tab 
    }); 
})();

來源

2012-12-01 methuselah

你撥弄沒有正確顯示的標籤，因爲它不包括jQuery的用戶界面是從標準的jQuery框架分開。當你包含UI時，它將根據你選擇的主題帶來自己的樣式。如果你需要重寫標準的jquery樣式，使用firebug來查看應用了哪些類並刪除或覆蓋它們 – WebChemist

@WebChemist我不想使用jQuery UI我想從頭開始自己設計樣式 – methuselah

所以你想重新創建輪？爲什麼當ui包將處理讓製表符實際工作的js功能時，那麼您只需根據需要覆蓋ui主題css即可。 – WebChemist

這裏是一個純CSS的方法，使標籤（在csstricks瞭解到這一點）

使用收音機，但萬噸，因爲你的標籤菜單
使用:checked鉤樣式選擇的選項卡的內容顯示
隱藏實際的單選按鈕和他們的風格標籤作爲標籤。點擊標籤會影響for屬性中指定的控件，因此單擊選項卡仍會影響單選按鈕。

這裏是一個演示：http://jsfiddle.net/abwyU/

來源

2012-12-01 12:46:58

定義選項卡的CSS規則

回答

相關問題