0

我只是想知道为标签定义 CSS 规则的最佳方法。网上有很多方法，但我想以最有效的方式实现它。你怎么做呢？我的代码在这里：http: //jsfiddle.net/mgd5P/

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>​

JS

$(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
    });
})();​
4

1 回答 1

3

这是制作标签的纯 CSS 方法（在csstricks学习）

  1. 使用单选按钮作为选项卡菜单
  2. 使用:checked钩子设置所选选项卡内容的样式
  3. 隐藏实际的单选按钮并将其标签设置为选项卡。单击标签会影响属性中指定的控件for，因此单击选项卡仍会影响单选按钮。

这是一个演示：http: //jsfiddle.net/abwyU/

于 2012-12-01T12:46:58.717 回答