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

时间：2022-12-16 03:33:21

效果：

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

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

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

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>

相关文章