jq实现的选项卡 偏执的太偏执、 2022-05-31 04:08 137阅读 0赞 效果图: ![这里写图片描述][SouthEast] 代码如下: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>custom_tab</title> <style> .tab_box{ width: 50%; margin: 40px auto; border: 1px solid rgba(146, 141, 161, 0.64); position: relative; -webkit-border-radius: 6px; -moz-border-radius: 6px; border-radius: 6px; } .tab_menu_box>span{ display: inline-block; width: 25%; text-align: center; background-color: #fff; color: #8c8c8c; height: 30px; line-height: 30px; cursor: pointer; } .tab_menu_box>span:first-child{ border-top-left-radius: 6px; } .tab_menu_box>span:last-child{ border-top-right-radius: 6px; } .tab_menu_active{ background-color: #2c86c4 !important; color: #fff !important; -webkit-border-radius: 6px; -moz-border-radius: 6px; border-radius: 6px; } .tab_content_box{ position: relative; height: 220px; } .tab_content{ border-bottom-left-radius: 6px; border-bottom-right-radius: 6px; } .tab_content{ position: relative; top: 0; left: 0; display: none; height: 100%; background-color: #e9f2fb; line-height: 26px; font-size: 14px; color: #666; text-indent: 1em; } .tab_content_active{ display: block; } </style> </head> <body> <div class="tab_box"> <div class="tab_menu_box"> <span class="tab_menu tab_menu_active" data-index = "0">生活</span><!-- --><span class="tab_menu" data-index = "1">娱乐</span><!-- --><span class="tab_menu" data-index = "2">旅游</span><!-- --><span class="tab_menu" data-index = "3">学习</span> </div> <div class="tab_content_box"> <div class="tab_content tab_content_active">生活</div> <div class="tab_content">娱乐</div> <div class="tab_content">旅游</div> <div class="tab_content">学习</div> </div> </div> <script src="js/jquery-3.2.1.js"></script> <script> var tab_content = $(".tab_content"); $(".tab_menu").click(function () { var index = $(this).data("index"); $(this).siblings().removeClass("tab_menu_active"); $(this).addClass("tab_menu_active"); $(tab_content).removeClass("tab_content_active"); $(tab_content[index]).addClass("tab_content_active"); }); </script> </body> </html> [SouthEast]: /images/20220531/1c204ecc0e3a4527b9ed3f0403a58117.png
还没有评论,来说两句吧...