效果1：
<html ><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <script src="js/jquery-3.4.1.min.js"></script> <script type="text/javascript"> $(document).ready(function(){ $('.ct:gt(0)').hide(); let hdw = $('.box ul li'); hdw.hover(function(){ $(this).addClass('one').siblings().removeClass(); let hdw_index = hdw .index(this); $('.ct').eq(hdw .index(this)).show().siblings().hide(); }); }); </script> <style type="text/css"> * { padding:0; margin:0;} body { font-size:12px; padding:100px;} ul { list-style-type:none;} .box ul { height:30px; line-height:30px;} .box ul li { float:left; padding:0; padding-left:10px; position:relative; top:1px; background:url(images/bg.png) no-repeat left top; cursor:pointer; margin-right:5px; } .box ul li span { display:block; background:url(images/bg.png) no-repeat right top; padding-right:10px;} .box ul li.two { background:orange;} .content { width:325px; border:1px solid #A1AFB9; padding:10px; height:100px;} .box ul li.one { background:url(images/bg_1.png) no-repeat left top;} .box ul li.one span { background:url(images/bg_1.png) no-repeat right top;} </style></head><body> <div>效果2：
<html ><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <script src="js/jquery-3.4.1.min.js"></script> <script type="text/javascript"> $(document).ready(function(){ $('.ct:gt(0)').hide(); let hdw = $('.box ul li'); hdw.hover(function(){ $(this).addClass('two').siblings().removeClass('two'); }); hdw.click(function(){ $(this).addClass('one').siblings().removeClass(); let hdw_index = hdw .index(this); $('.ct').eq(hdw .index(this)).show().siblings().hide(); }); }); </script><style type="text/css"> * { padding:0; margin:0;} body { font-size:12px; padding:100px;} ul { list-style-type:none;} .box ul { height:30px; line-height:30px;} .box ul li { float:left; padding:0 10px; background:url(images/bg_2.png) repeat-x; border:1px solid #A1AFB9; border-bottom:none; position:relative; cursor:pointer; margin-right:5px; } .box ul li.two { background:url(images/bg_3.png) repeat-x;} .content { width:325px; border:1px solid #A1AFB9; padding:10px; height:100px;} * html .content { margin-top:-1px;} .box ul li.one { background:#fff;}</style></head><body> <div>