定义选项卡的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规则

回答

相关问题