效果：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <script type="text/javascript" src="../jquery-1.11.2.min.js"></script> <title>无标题文档</title> </head> <body> <div style="100%; height:48px; border:solid 1px #ddd; color:#666;font-size:16px;"> <div class="cd" bs="jbxx" style="125px; height:46px; background-color:#22ac38; float:left; border:solid 1px #ddd; color:white; text-align:center; line-height:46px; vertical-align:middle ">基本信息 </div> <div class="cd" bs="cltp" style="125px; height:46px; background-color:#FFF; float:left; border:solid 1px #ddd; color:#666; text-align:center; line-height:46px; vertical-align:middle ">车辆图片 </div> <div class="cd" bs="jcbg" style="125px; height:46px; background-color:#FFF; float:left; border:solid 1px #ddd; color:#666; text-align:center; line-height:46px; vertical-align:middle ">检测报告 </div> <div class="cd" bs="pzcs" style="125px; height:46px; background-color:#FFF; float:left; border:solid 1px #ddd; color:#666; text-align:center; line-height:46px; vertical-align:middle ">配置参数 </div> </div> <!--基本信息--> <div class="xq" id="jbxx" style="100%; display:block"> <div style=" margin-top:10px;font-size:16px; color:#666; font-weight:bold"> <div style="background-color:#22ac38; height:16px; 4px;float:left; margin-right:5px;"></div> 基本信息</div> <div style="100%; font-size:14px;margin-top:20px"> <div style="220px; height:24px; float:left;margin-right:30px">车主： 王先生| 职员| 顺义</div> <div style="200px; height:24px;float:left;margin-right:30px">年检到期：2017-10</div> <div style="200px; height:24px;float:left;margin-right:30px">交强险到期：2016-10</div> <div style="200px; height:24px;float:left;margin-right:30px">商业险到期：2016-10</div> <div style="200px; height:24px;float:left;margin-right:30px">过户次数：2016-10</div> </div> <div style="clear:both"></div> <div style="100%; height:80px; background-color:#f9f9f9;border:solid 1px #ddd; margin-top:10px; word-wrap:break-word; word-break:break-all;font-size:14px; padding:15px 0px 15px 15px;">还拉黑的卡拉哈里还法拉赫客户</div> </div> <!--车辆图片--> <div class="xq" id="cltp" style="100%; display:none"> <div style=" margin-top:10px;font-size:16px; color:#666; font-weight:bold"> <div style="background-color:#22ac38; height:16px; 4px;float:left; margin-right:5px;"></div> 车辆图片</div> <?php for($i=0;$i<count($attr);$i++) { echo "<img src='{$attr[$i][0]}' style='580px; height:400px; margin:10px;'/>"; } ?> </div> <!--检测报告--> <div class="xq" id="jcbg" style="100%; height:500px; background-color:#63C; display:none"></div> <!--配置参数--> <div class="xq" id="pzcs" style="100%; height:500px; background-color:#FC0; display:none"> </div> </div> <script type="text/javascript"> $(document).ready(function(e) { $(".cd").click(function(){ //所有DIV背景变白,字体变灰色 $(".cd").css("background-color","#FFF"); $(".cd").css("color","#666"); //自己变绿，字体变白 $(this).css("background-color","#22ac38"); $(this).css("color","#FFF"); //控制详情显示 var id = $(this).attr("bs"); $(".xq").css("display","none"); $("#"+id).css("display","block"); //添加一个自定义属性 $(".cd").removeAttr("xz"); $(this).attr("xz","1"); }) $(".cd").mouseover(function(){ //自己变绿，字体变白 $(this).css("background-color","#22ac38"); $(this).css("color","#FFF"); }) $(".cd").mouseout(function(){ if($(this).attr("xz") == "1") { } else { //变回原形 $(this).css("background-color","#FFF"); $(this).css("color","#666"); } }) }); </script> </body> </html>