Question

我只是想知道为标签定义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
    });
})();

Answer 1

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

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

以下是演示：http://jsfiddle.net/abwyU/

为选项卡定义CSS规则

1 个答案: