<!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>input:checked实现tab切换</title> <style> .tabs{ color: #FFF; font-family: "微软雅黑"; } input{ opacity: 0;/*隐藏input的选择框*/ } input:checked+label{ padding-bottom: 6px; font-weight: bold; } label{ cursor: pointer;/*鼠标移上去变成手状*/ float: left; width: 120px; line-height: 40px; margin-right: 5px; text-align: center; } .tabs label:nth-of-type(1){ background: #5eb0de; } .tabs label:nth-of-type(2){ background: #86cad7; } .tabs label:nth-of-type(3){ background: #e9bab3; } .tabs label:nth-of-type(4){ background: #a8c194; } label:hover{ font-weight: bold; } /*选择前面有.tabs input:nth-of-type(x):checked的.panels .panel:nth-child(x)*/ .tabs input:nth-of-type(1):checked~.panels .panel:nth-child(1){ opacity: 1; background: #5eb0de; -webkit-transition: .3s; } .tabs input:nth-of-type(2):checked~.panels .panel:nth-child(2){ opacity: 1; background: #86cad7; -webkit-transition: .3s; } .tabs input:nth-of-type(3):checked~.panels .panel:nth-child(3){ opacity: 1; background: #e9bab3; -webkit-transition: .3s; } .tabs input:nth-of-type(4):checked~.panels .panel:nth-child(4){ opacity: 1; background: #a8c194; -webkit-transition: .3s; } .panel{ opacity: 0; position: absolute;/*使内容区域位置一样*/ height: 200px; width: 455px; margin-top: 25px; padding: 0 20px; } </style> </head> <body> <div> <input checked type="radio"> <label for="one">HTML/CSS</label> <input type="radio"> <label for="two">JavaScript</label> <input type="radio"> <label for="three">AJAX</label> <input type="radio"> <label for="four">Sever Side</label> <div> <div> <h2>HTML文本标签语言</h2> <p>HTML 是通向 WEB 技术世界的钥匙。HTML 非常容易学习！你会喜欢它的！</p> </div> <div> <h2>JavaScript脚本语言</h2> <p>JavaScript 是世界上最流行的脚本语言。<br/> JavaScript 是属于 web 的语言，它适用于PC、笔记本电脑、平板电脑和移动电话。<br/> JavaScript 被设计为向 HTML 页面增加交互性。 </p> </div> <div> <h2>AJAX阿贾克斯</h2> <p>AJAX = Asynchronous JavaScript and XML（异步的 JavaScript 和 XML）。<br/> AJAX 不是新的编程语言，而是一种使用现有标准的新方法。<br/> AJAX 是与服务器交换数据并更新部分网页的艺术，在不重新加载整个页面的情况下。 </p> </div> <div> <h2>Sever Side服务器脚本</h2> <p>SQL 是用于访问和处理数据库的标准的计算机语言。<br/> ASP 是创建动态交互性网页的强大工具。<br/> ADO 指 ActiveX 数据对象（ActiveX Data Objects）。<br/> PHP 是一种创建动态交互性站点的强有力的服务器端脚本语言。<br/> VBScript 是微软公司出品的脚本语言。 </p> </div> </div> </div> </body> </html>
您可能感兴趣的文章: