老马jQuery教程(3)_H5之家 - 中国HTML5教程资源分享第一站

上课案例：自定义插件演示

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>列表切换案例</title> <style> html, body, div, ul, li { padding: 0; margin: 0; } ul, ol { list-style: none; } .tab-wrap { border: 1px solid #ccc; width: 606px; height: 340px; overflow: hidden; } .tab-wrap .tab-hd { overflow: hidden; } .tab-wrap .tab-hd .tab-hd-item { float: left; width: 200px; height: 30px; line-height: 30px; background-color: #f0f0f0; border: 1px solid #ccc; text-align: center; cursor: pointer; } .tab-wrap .tab-hd .tab-hd-item:hover { background-color: #fafafa; } .tab-wrap .tab-bd .tab-bd-item { width: 600px; display: none; } .tab-wrap .tab-bd .on { display: block; } </style> </head> <body> <div> <ul> <li>商品1</li> <li>商品2</li> <li>商品3</li> </ul> <ul> <li> <img src="./img/1.png" alt=""> </li> <li> <img src="./img/2.png" alt=""> </li> <li> <img src="./img/3.png" alt=""> </li> </ul> </div> <script src="./lib/jquery-1.12.4.js"></script> <script> (function ($) { $.fn.lmTab = function () { var $hdItems = $(this).find('.tab-hd-item'), $bdItems = $(this).find('.tab-bd-item'); $hdItems.on('mouseenter', function (e) { // 拿到当前鼠标移入的hd部分li的索引。 var index = $hdItems.index(this); // 获取元素的索引。 var bdLiDom = $bdItems.get(index); // 可以获得第index个元素的dom对象。 $(bdLiDom).addClass('on').siblings().removeClass('on'); }); }; })(jQuery); $(function () { // 自定义插件 $('.tab-wrap').lmTab(); }); </script> </body> </html> 5.jQuery常用插件

.....

对应视频地址：https://chuanke.baidu.com/s5508922.html
老马qq： 515154084
老马微信：请扫码

微信：Flydragon_malun 或者18911865673