爱站程序员基地jQuery通过addClass和removeClass实现选项卡
<!DOCTYPE html><html lang=\"en\"><head><meta charset=\"UTF-8\"><meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\"><title>选项卡</title><style type=\"text/css\">*{margin: 0;padding: 0;}.box_out{width: 500px;height: 300px;margin: 100px auto;}.top{width: 100%;height: 30px;text-align: center;}.top button{width: 100px;border-bottom: 1px solid black;}img{width: 500px;height: 270px;}.top .cur{background-color: skyblue;}.main div{display: none;width: 500px;height: 270px;}.main .cur{display: block;}</style><script src=\"../jquery-3.1.1.js\"></script><script>$(function(){var idx=0; //索引var $btns = $(\".top button\");var $imgs = $(\".main div\");//获取按钮var $box1=$(\"#btn1\");var $box2=$(\"#btn2\");var $box3=$(\"#btn3\");//为每个按钮单独绑定单机相应函数$box1.click(function(){idx=$(this).index();change();});$box2.click(function(){idx=$(this).index();change();});$box3.click(function(){idx=$(this).index();change();});//封装function change(){$btns.eq(idx).addClass(\"cur\").siblings().removeClass(\"cur\");$imgs.eq(idx).addClass(\"cur\").siblings().removeClass(\"cur\");}});</script></head><body><div id=\"box\" class=\"box_out\"><div class=\"top\"><button id=\"btn1\" class=\"cur\">box1</button><button id=\"btn2\" class=\"\">box2</button><button id=\"btn3\" class=\"\">box3</button></div><div class=\"main\"><div class=\"cur\"><img src=\"../测试图片/8.jpg\" alt=\"\"></div><div class=\"\"><img src=\"../测试图片/7.jpg\" alt=\"\"></div><div class=\"\"><img src=\"../测试图片/6.jpg\" alt=\"\"></div></div></div></body></html>
效果图：
图片资源：
