点击按钮切换内容【html+css3+jquery 点击按钮切换内容】
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 | <!DOCTYPE html><html><head> <meta charset="UTF-8"> <title>点击按钮切换内容</title></head><body><div> <ul> <li>按钮一</li> <li>按钮二</li> <li>按钮三</li> </ul></div><div> <div>内容一内容一内容一</div> <div>内容二</div> <div>内容三内容三内容三内容三内容三内容三内容三</div></div><style type="text/css"> .lt_tab-menu_switch ul{padding: 0;margin: 0;} .lt_tab-menu_switch ul li{display: inline-block;width: 200px;height: 40px;line-height: 40px;text-align: center;cursor: pointer;} .lt_tab-menu_switch ul li.lt_button_menu{background: #749dcf;} .lt_content_classify .lt_01_content{width: 600px;height: 300px;background: #F2F2F2;border: 1px solid #749dcf;;display: none;padding: 15px;} .lt_content_classify .lt_01_content:first-child{display: block;}</style> <script type='text/javascript' src='https://cdn.jsdelivr.net/gh/jinsom/LightSNS-CDN@1.6.83/assets/js/jquery.min.js?ver=1.6.64' id='jquery-js'></script><script type="text/javascript"> $(function () { $('.lt_tab-menu_switch li').click(function () { $(this).addClass('lt_button_menu').siblings().removeClass('lt_button_menu'); var index=$(this).index(); $(".lt_content_classify .lt_01_content").eq(index).show().siblings().hide(); }) })</script></body></html> |
