<html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" > <title>Test</title> <style type="text/css"> body{ margin:0; } .tab{ width:100%; position:absolute; bottom:0; margin:0; list-style: none; background-color: #eee; overflow: hidden; padding-left: 0px; } .tab li{ float: left; width: 50%; height: 60px; line-height: 60px; text-align: center; } .tab li.cur { border: none; color: #c40001; margin-left: 0; background-color: #fff; border-top: 3px solid #c40001; } .tabCon{ width:100%; height:100%; } </style> </head> <body> <div id="tabCons"> <div class="tabCon"> 内容1 </div> <div class="tabCon" style="display:none;"> 内容2 </div> </div> <!--页单--> <ul id="tab" class="tab"> <li class="cur">NFC标签扫描</li> <li>标签编号查询</li> </ul> </body> <script type="text/javascript" src="../third-party/jquery-1.11.0.min.js"></script> <script type="text/javascript"> /** * 页单切换 */ $(".tab li").click(function(){ $(this).addClass("cur").siblings().removeClass("cur"); $("#tabCons .tabCon").hide().eq($(this).index()).show(); }); </script> </html>
一个简单的tab样式
最新推荐文章于 2023-10-30 14:59:33 发布