PHP——菜单及内容轮换（Jquery）

效果：

<!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="width:100%; height:48px; border:solid 1px #ddd; color:#666;font-size:16px;">
    <div class="cd" bs="jbxx" style="width: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="width: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="width: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="width: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="width:100%; display:block">
    <div style=" margin-top:10px;font-size:16px; color:#666; font-weight:bold">
    <div style="background-color:#22ac38; height:16px; width:4px;float:left; margin-right:5px;"></div>
    基本信息</div>

    <div style="width:100%; font-size:14px;margin-top:20px">
        <div style="width:220px; height:24px; float:left;margin-right:30px">车主： 王先生| 职员| 顺义</div>
        <div style="width:200px; height:24px;float:left;margin-right:30px">年检到期：2017-10</div>
         <div style="width:200px; height:24px;float:left;margin-right:30px">交强险到期：2016-10</div>
         <div style="width:200px; height:24px;float:left;margin-right:30px">商业险到期：2016-10</div>
          <div style="width:200px; height:24px;float:left;margin-right:30px">过户次数：2016-10</div>

    </div>
    <div style="clear:both"></div>

    <div style="width: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="width:100%; display:none">
    <div style=" margin-top:10px;font-size:16px; color:#666; font-weight:bold">
    <div style="background-color:#22ac38; height:16px; width:4px;float:left; margin-right:5px;"></div>
    车辆图片</div>
    <?php

            for($i=0;$i<count($attr);$i++)
            {

                echo "<img src='{$attr[$i][0]}' style='width:580px; height:400px; margin:10px;'/>";
            }
        ?>

</div>

<!--检测报告-->
<div class="xq" id="jcbg" style="width:100%; height:500px; background-color:#63C; display:none"></div>

<!--配置参数-->
<div class="xq" id="pzcs" style="width: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>