爱站程序员基地jqueryTab选项卡
运行截图
完整代码
1.给所有tab注册鼠标进入事件
2.给当前tab添加样式addClass（“样式名”），选择其他兄弟类$(this).siblings()
3.获取当前索引，给当前div添加选中（display：block），其他图片隐藏
<!DOCTYPE html><html><head><meta charset=\"utf-8\" /><title></title><style type=\"text/css\">.wrap_tab{width: 440px;height: 298px;border: 1px solid red;margin: 50px auto;}.tab_nav{padding-left: 0px;height: 50px;background-color: goldenrod;margin: 0;}.tab_nav>li{list-style: none;width: 110px;text-align: center;height: 50px;line-height: 3.125rem;float: left;}.current{background-color: gray;}.content>li{list-style: none;display: none;}.content>.show{display: block;}</style></head><body><div class=\"wrap_tab\"><ul class=\"tab_nav\"><li class=\"current\">国际大牌</li><li>国状用品</li><li>清洁用品</li><li>男士用品</li></ul><ul class=\"content\"><li class=\"show\"><img src=\"./img/images/p1.jpg\" ><h3>XXXX洗发水</h3><p>￥29</p></li><li><img src=\"./img/images/p2.jpg\" ></li><li><img src=\"./img/images/p3.jpg\" ></li><li><img src=\"./img/images/p4.jpg\" ></li></ul></div></body><script src=\"./js/jquery-3.1.1.min.js\" type=\"text/javascript\" charset=\"utf-8\"></script><script type=\"text/javascript\">$(document).ready(function(){// 方法一// 缺点：当移出时会有显示图片空的想象// 鼠标进入为当前事件添加类,并且找到当前位置对应的图片显示// $(\".tab_nav>li\").mouseenter(function(){// $(this).addClass(\"current\");// var index=$(this).index();// var $li=$(\".content>li\").eq(index);// $li.addClass(\"show\");// });// 鼠标移出当前事件删除类,并且找到当前位置对应的图片隐藏//// $(\".tab_nav>li\").mouseleave(function(){// $(this).removeClass(\"current\");// var index=$(this).index();// var $li=$(\".content>li\").eq(index);// $li.removeClass(\"show\");// });// 方法二,解决方法一的问题// 鼠标进入,为当前事件添加类,并且移除其他兄弟类名$(\".tab_nav>li\").mouseenter(function(){$(this).addClass(\"current\");$(this).siblings().removeClass(\"current\");// 找到当前事件对应的图片显示,并移除其兄弟类var index=$(this).index();var $li=$(\".content>li\").eq(index);$li.siblings().removeClass(\"show\")$li.addClass(\"show\");});});</script></html>折叠菜单
