方法四：不用js，用“input:checked”来做tab切换，先把所有的内容隐藏，被选中的内容显示。代码如下：
<!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>input:checked实现tab切换</title> <style> input{ opacity: 0;/*隐藏input的选择框*/ } label{ cursor: pointer;/*鼠标移上去变成手状*/ float: left; } label:hover{ background: #eee; } input:checked+label{ color: red; } /*选择前面有.tabs input:nth-of-type(x):checked的.panels .panel:nth-child(x)*/ .tabs input:nth-of-type(1):checked~.panels .panel:nth-child(1), .tabs input:nth-of-type(2):checked~.panels .panel:nth-child(2){ opacity: 1; } .panel{ opacity: 0; position: absolute;/*使内容区域位置一样*/ } </style> </head> <body> <div> <input checked type="radio"> <label for="one">标题一</label> <input type="radio"> <label for="two">标题二</label> <div> <div> <p>内容一</p> </div> <div> <p>内容二</p> </div> </div> </div> </body> </html>
该方法的缺点是，不同区域切换只能通过点击。
如果大家还想深入学习，可以点击两个精彩的专题：javascript选项卡操作方法汇总 jquery选项卡操作方法汇总
以上就是为大家总结的tab切换实现方法，希望对大家的学习有所帮助，顺着这个思路动手制作自己tab切换特效。
您可能感兴趣的文章: