实例:
代码:
/* css */ <article class="article-content"> <style type="text/css"> ul,li{margin:0;padding:0;list-style:none;} #tabbox{ width:100%; overflow:hidden; margin:0 auto;} #tabbox a{text-decoration: none;color: #000;font-size: 14px;} .tab_conbox{border-top: none;} .tab_con{ display:none;} .tabs{height: 32px;border-bottom:1px solid #eee;border-left: 1px solid #eee;width: 100%;} .tabs li{height:31px;line-height:31px;float:left;border:1px solid #eee;border-left:none;margin-bottom: -1px;background: #f7f7f7;overflow: hidden;position: relative;} .tabs li a {display: block;padding: 0 20px;border: 1px solid #fff;outline: none;} .tabs li a:hover {background: #eee;} .tabs .thistab,.tabs .thistab a:hover{background: #fff;border-bottom: 1px solid #eee;} .tab_con {padding:0px;font-size:14px;line-height:100%;} </style> /* js */ <script type="text/javascript"> $(document).ready(function() { jQuery.jqtab = function(tabtit,tab_conbox,shijian) { $(tab_conbox).find("li").hide(); $(tabtit).find("li:first").addClass("thistab").show(); $(tab_conbox).find("li:first").show(); $(tabtit).find("li").bind(shijian,function(){ $(this).addClass("thistab").siblings("li").removeClass("thistab"); var activeindex = $(tabtit).find("li").index(this); $(tab_conbox).children().eq(activeindex).show().siblings().hide(); return false; }); }; $.jqtab("#tabs","#tab_conbox","click"); }); </script> /* html */ <div id="tabbox"> <ul id="tabs" class="tabs"> <li class=""> <a href="#">BLOG</a> </li> <li class=""> <a href="#">个人简介</a> </li> <li class=""> <a href="#">测试</a> </li> </ul> <ul id="tab_conbox" class="tab_conbox"> <li class="tab_con" style="display:none;"> <p align="center"> <img src="https://hujinyuan.cn/content/uploadfile/tpl_options/logo2.jpg" /> </p> </li> <li class="tab_con" style="display:list-item;"> <p> 其实也没什么好写的,只能简单介绍下 </p> <p> 网名:演员 </p> <p> 性别:男(纯属废话) </p> <p> 年龄:18岁(永远18) </p> <p> 所在地:中国 </p> <p> 感情状况:无 </p> <p> 文化水平:无 </p> <p> 工作情况:无业游民(暂时还没找到适合的工作) </p> <p> 爱好:玩 </p> <p> 联系邮箱:admin@hujinyuan.cn 联系QQ:1776588731 </p> <p style="text-align:right;"> 2020年2月1日 </p> </li> <li class="tab_con" style="display:none;"> <p> 测试 </p> </li> </ul> </div> </article>
版权声明:本文为(演员)原创文章,转载时请注明出处!