爱站程序员基地jQuery选项卡实现切换图像
<!DOCTYPE html><html lang=\"en\"><head><meta charset=\"UTF-8\"><meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\"><title>选项卡</title><script src=\"jquery-3.3.1.min.js\"></script><style>*{margin: 0;padding: 0;}.box{width: 440px;height: 500px;border: 1px solid red;margin: 50px auto;}ul>li{/* 去掉小圆点 */list-style: none;width: 110px;height: 50px;background: rgb(205, 164, 245);float: left;text-align: center;/* 实现文字居中，line-height=height */line-height: 50px;}.nav>.current{background: #f39797;}.content>li{list-style: none;display: none;}img{width: 440px;height: 450px;}.content>.show{display: block;}</style><script>$(function(){$(\".nav>li\").mouseenter(function(){$(this).addClass(\"current\")// 获取选项卡的下标var index = $(this).index()var img = $(\".content>li\").eq(index)// 显示找到的图片img.addClass(\"show\")})$(\".nav>li\").mouseleave(function(){$(this).removeClass(\"current\")var index = $(this).index()var img = $(\".content>li\").eq(index)// 显示找到的图片img.removeClass(\"show\")})})</script></head><body><div class=\"box\"><ul class=\"nav\"><li class=\"current\">第一张</li><li>第二张</li><li>第三张</li><li>第四张</li></ul><ul class=\"content\"><li class=\"show\"><img src=\"images/第1页.png\" alt=\"\"></li><li><img src=\"images/下载 (1).jpg\" alt=\"\"></li><li><img src=\"images/心灵捕手_1时22分18秒_4.jpg\" alt=\"\"></li><li><img src=\"images/心灵捕手_19分17秒_1.jpg\" alt=\"\"></li></ul></div></body></html>
