jQuery 选项卡 左手的ㄟ右手 2022-05-11 14:34 182阅读 0赞 选项卡是非常常见而实用的效果,本篇文章示例一个简单的选项卡效果,在以往的代码中都是选择jQuery对象级别插件扩展,本次将改为类级别插件扩展的方式。 上效果图: ![70][] 源码如下: <!-- author:helang Email:helang.love@qq.com --> <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no"> <meta name="author" content="helang.love@qq.com"> <title>jQuery之美——选项卡</title> <style type="text/css"> body{ margin: 0; padding: 0; background-color: #ffffff; font-size: 14px; font-family: 'Microsoft YaHei', 'Times New Roman', Times, serif; letter-spacing: 0; color: #333333; } .container{ width: 600px; height: auto; margin: 0 auto; } /* 选项卡样式开始 */ .tabControl ul{ padding: 0; margin: 0; list-style: none; } .tabControl ul.head:after{ content: ''; display: block; clear: both; } .tabControl ul.head>li{ padding: 0 25px; float: left; border-top: #cccccc solid 1px; border-right: #cccccc solid 1px; height: 40px; line-height: 40px; font-size: 16px; position: relative; cursor: pointer; } .tabControl ul.head>li:first-child{ border-left: #cccccc solid 1px; } .tabControl ul.head>li.active{ color: #EA0D04; } .tabControl ul.head>li.active:after{ content: ''; display: block; width: 100%; height: 1px; background-color: #ffffff; position: absolute; left: 0; bottom: -1px; z-index: 1; } .tabControl ul.body{ border: #cccccc solid 1px; height: 150px; } .tabControl ul.body>li{ padding: 15px; margin: 0; display: none; } /* 选项卡样式结束 */ </style> </head> <body> <h1 style="text-align: center;margin: 20px 0;">jQuery之美——选项卡</h1> <div class="container"> <!-- 选项卡开始 --> <div class="tabControl"> <ul class="head" id="tabHead-1"> <li>我的邮箱</li> <li>我的QQ</li> <li>微信公众号</li> </ul> <ul class="body" id="tabBody-1"> <li> <h2>helang.love@qq.com</h2> </li> <li> <h2>1846492969</h2> </li> <li> <h2>WEB前端梦之蓝:web-7258</h2> </li> </ul> </div> <!-- 选项卡结束 --> </div> <script type="text/javascript" src="https://mydarling.gitee.io/resource/jQuery/jquery-1.9.1.min.js"></script> <script type="text/javascript"> /* jQuery类级别插件扩展 */ $.extend({ hlTabControl:function (params) { if(!$.isPlainObject(params)){ console.error("参数必须为一个 Object 对象,并包含 head,body 属性"); } var headEl=params.head.children("li"),bodyEl=params.body.children("li"); var changeTab=function (item) { headEl.eq(item).addClass("active").siblings("li").removeClass("active"); bodyEl.eq(item).show().siblings("li").hide(); }; headEl.click(function () { changeTab($(this).index()); }); changeTab(params.item || 0); } }); $.hlTabControl({ head:$("#tabHead-1"), // 头部元素容器 body:$("#tabBody-1"), // 内容元素容器 item:2 // 默认显示项(下标) }); </script> </body> </html> > 作者:[黄河爱浪][Link 1] QQ:1846492969,邮箱:helang.love@qq.com > > 微信公众号:`web-7258`,本文原创,著作权归作者所有,转载请注明原链接及出处。 > > 更多精彩文章,请扫下方二维码关注我的公众号 > > ![20190512094840637.jpg][] [70]: /images/20220505/2a0e203572d4458a94b9d057e9f190a0.png [Link 1]: https://blog.csdn.net/u013350495 [20190512094840637.jpg]: /images/20220505/0955d08630184f9c94409d511c04d3f3.png
还没有评论,来说两句吧...