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>
PHP——菜单及内容轮换（Jquery）的更多相关文章
- 下拉菜单;手风琴;九宫格的Jquery的使用实例
下拉菜单;手风琴;九宫格的Jquery的使用实例 1.下拉菜单 效果如图: 代码如下: <!DOCTYPE html> <html lang="en"> & ...
- Android菜单项内容大全
一.介绍: 菜单是许多应用中常见的用户界面组件. Android3.0版本以前,Android设备会提供一个专用"菜单"按钮呈现常用的一些用户操作, Android3.0版本以后, ...
- 推荐一个内容滚动jquery插件
myslider是一个内容滚动jquery插件,版本0.1.2的每次滚动内容是一行内容,可以是文字,可以是一个链接,还可以是图片. 官方网址:http://keleyi.com/jq/myslider ...
- C# WPF 左侧菜单右侧内容布局效果实现
原文:C# WPF 左侧菜单右侧内容布局效果实现 我们要做的效果是这样的,左侧是可折叠的菜单栏,右侧是内容区域,点击左侧的菜单项右侧内容区域则相应地切换. wpf实现的话,我的办法是用一个tabcon ...
- 折腾linux随笔 之 关闭Budgie默认自动隐藏应用的菜单栏 与 Gnome系桌面应用菜单无内容解决
关闭Budgie默认自动隐藏应用菜单栏 首选项 -> 设置 -> 通用辅助功能 -> 打开 始终显示通用辅助菜单 后的开关 -> 注销桌面重新登录. done. 解决Gnome ...
- [jquery]添加行内容后根据下拉菜单选择内容对比之前已有选项，若有重置再提示
今天页面上一个添加列内容时,要对选择内容与之前已有选项内容作对比,防止用户重复选择内容 页面HTML代码 <ul class="list-group xj-list-NObor xj- ...
- 菜单与内容下拉jQuery
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...
- 创建基于Bootstrap的下拉菜单的DropDownList的JQuery插件
Bootstrap是当下流行的前端UI组件库之一.利用Bootstrap,可以很方便的构造美观.统一的页面.把设计师从具体的UI编码中解放出来. Bootstrap提供了不少的前端UI组件.带下拉 ...
- php部分---函数、四类常用函数、例子（下拉菜单添加内容）；
1.简单函数 四要素:返回类型,函数名,参数列表,函数体 function Show() { echo "hello"; } Show(); 2.有返回值的函数 function ...
随机推荐
- [Android-Demo]Android View的拖动
↑ 请善用目录 Demo下载地址:http://download.csdn.net/detail/u011634756/5959637 (免积分哦~) ------------------------ ...
- C# SQLite 创建数据库的方法增删查改语法和命令
SQLite介绍 SQLite是一个开源.免费的小型RDBMS(关系型数据库),能独立运行.无服务器.零配置.支持事物,用C实现,内存占用较小,支持绝大数的SQL92标准. SQLite数据库官方主页 ...
- 【转载】Android控件属性大全
控件属性: android属性 Android功能强大,界面华丽,但是众多的布局属性就害苦了开发者,下面这篇文章结合了网上不少资料, 第一类:属性值为true或falseandroid:layout_ ...
- FastDFS安装配置过程中出现错误提示"/home/yuqing/fastdfs" can't be accessed, error info: No such file or directory
解决: mkdir -p /home/yuqing/fastdfs 这回正常了,查看启动成功与否 [root@localhost FastDHT]# ps -ef |grep track |grep ...
- 什么是Cookie。Cookie的原理介绍，Cookie的简单应用
1 介绍:Cookies亦称Cookie .Cookies是一种能够让网站服务器把少量数据储存到客户端的硬盘或内存,或是从客户端的硬盘读取数据的一种技术.Cookies是当你浏览某网站时,由Web服务 ...
- spring bean parent属性详解
必要条件:1.子bean必须与父bean保持兼容,也就是说子bean中必须有父bean定义的所有属性. 2.父bean必须是抽象bean或者定义lazy-init=true也就是不让bean工厂实例化 ...
- 【微信小程序】退款功能教程（含申请退款和退款回调）
1.一定要区分小程序和公众号的退款,唯一的区别就是 appid不一样,其他的都是一样的. 不废话,直接写代码了啊. 放大招!!! 然后,需要注意的:最好是把证书放在下面的php的同级或者下级. 证书的 ...
- 《将一个字符串转换成datetime时，先分析该字符串以获取日期，然后再将每个变量放置到datetime对象中》的解决办法
我们在写代码时,稍不注意就收到VS那文不对题的错误提示. 最近在项目上碰到了“将一个字符串转换成datetime时,先分析该字符串以获取日期,然后再将每个变量放置到datetime对象中”的这个错误提 ...
- 【转】C#播放H264裸码流
原文地址:https://www.cnblogs.com/cangyue080180/p/5873351.html 要播放H264裸码流,可以分拆为以下三个工作: 1.解码H264裸码流获取YUV数据 ...
- 机器学习之数据预处理，Pandas读取excel数据
Python读写excel的工具库很多,比如最耳熟能详的xlrd.xlwt,xlutils,openpyxl等.其中xlrd和xlwt库通常配合使用,一个用于读,一个用于写excel.xlutils结 ...