首页 > 代码库 > 选项卡
选项卡
1
<!DOCTYPE html><html xmlns="http://www.w3.org/1999/xhtml"><head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <meta name="keywords" content="选项卡,tab" /> <!--设置可以被浏览器搜索到的关键字--> <meta name="author" content="王" /> <!--作者--> <meta name="description" content="" /> <!--对网站的描述--> <script src="http://www.mamicode.com/Scripts/jquery-1.7.1.min.js"></script> <title></title> <style type="text/css"> * { margin: 0; padding: 0; list-style: none; } .zzsc { /*整个选项卡的样式*/ width: 500px; height: 300px; margin: 0 auto; background: #f0f0f0; /*border: 1px solid black;*/ } .zzsc .tab { /*overflow: hidden;*/ background: #ccc; height: 30px; border-bottom: 1px solid #38b942; width: 498px; /*text-align: center;*/ } .zzsc .tab a { position: relative; display: inline-block; text-decoration: none; color: #333; margin-left: 10px; top: 4px; height: 100%; } .zzsc .tab a:hover { background: #f0f0f0; color: #ff6a00; text-decoration: none; border-bottom: 1px solid #f0f0f0; } .zzsc .tab a.on { background: #f0f0f0; color: black; top: 4px; text-decoration: none; border-bottom: 1px solid #f0f0f0; } /*实现内容的样式*/ .zzsc .content { overflow: hidden; width: 498px; height:200px; position: relative; overflow-y:auto; /*border: 1px solid #f00;*/ } .zzsc .content ul { position: absolute; left: 0; top: 0; /*height:300px;*/ } .zzsc .content li { width: 500px; /*height: 300px;*/ float: left; } .zzsc .content li p { padding: 10px; } </style> <script> $(function () { $(‘.zzsc .content ul‘).width(500 * $(‘.zzsc .content li‘).length + ‘px‘); $(".zzsc .tab a").click(function () { $(this).addClass(‘on‘).siblings().removeClass(‘on‘); var index = $(this).index(); number = index; var distance = -500 * index; $(‘.zzsc .content ul‘).stop().animate({ left: distance }); }); var auto = 1; //等于1则自动切换，其他任意数字则不自动切换 if (auto == 1) { var number = 0; var maxNumber = $(‘.zzsc .tab a‘).length; function autotab() { number++; number == maxNumber ? number = 0 : number; $(‘.zzsc .tab a:eq(‘ + number + ‘)‘).addClass(‘on‘).siblings().removeClass(‘on‘); var distance = -500 * number; $(‘.zzsc .content ul‘).stop().animate({ left: distance }); } //设置自动播放 //var tabChange = setInterval(autotab, 3000); } //window.addEventListener("click", function () { // document.getElementById("sh").style.display = "block"; //}) }); </script></head><body> <div class="zzsc"> <div class="tab"> <a href="javascript:void(0);" class="on">第一个</a> <a href="javascript:void(0);">第二个</a> <a href="javascript:;">第三个</a> <a href="javascript:;">第四个</a> </div> <div class="content"> <ul> <li>阿达的放大放大放大师傅<br /> 阿达的放大放大放大师傅<br /> 阿达的放大放大放大师傅<br /> 阿达的放大放大放大师傅<br /> 阿达的放大放大放大师傅<br /> 阿达的放大放大放大师傅<br /> 阿达的放大放大放大师傅<br /> 阿达的放大放大放大师傅<br /> 阿达的放大放大放大师傅<br /> 阿达的放大放大放大师傅<br /> 阿达的放大放大放大师傅<br /> 阿达的放大放大放大师傅<br /> 阿达的放大放大放大师傅<br /> </li> <li>安装等发达 </li> <li>是顶顶顶顶顶顶顶顶顶顶顶顶顶顶顶 </li> <li>根据客观环境和法国 </li> </ul> </div> </div> <br /> <input type="button" value="http://www.mamicode.com/显示" id="btn" /> <div id="sh" style="position:fixed;top:0;left:0;background-color: rgba(128, 128, 128,0.5); width: 100%; height: 100%; display: none"> <div style="position:fixed;bottom:0;width:200px;height:200px;background-color:#ff6a00">1111</div> </div> </body></html>
选项卡
声明：以上内容来自用户投稿及互联网公开渠道收集整理发布，本网站不拥有所有权，未作人工编辑处理，也不承担相关法律责任，若内容有误或涉及侵权可进行投诉： 投诉/举报 工作人员会在5个工作日内联系你，一经查实，本站将立刻删除涉嫌侵权内容。