用jQuery和php实现类似的360功能开关效果

为了更好地演示这个示例，我们需要一个数据表来记录所需的函数描述和打开状态。表结构如下：

复制代码代码如下所示：
创建表（PRO）
` ID ` int（11）不为空auto_increment，
`标题` varchar（50）不为空，
`描述` varchar（200）不为空，
`状态` tinyint（1）不为空的默认'0'，
主键（id）
）= MyISAM引擎默认的字符集utf8；
可以在表中插入多个数据到PRO中。

index.php

我们希望在页面上显示相关函数的列表，用PHP读取数据表，并以列表的形式显示它。

复制代码代码如下所示：
< PHP
require_once（'connect。php）； / /数据库连接
$query=mysql_query (select * from Pro order by ID ASC);
而（$行= mysql_fetch_array（$查询））{
>
class=ad_ontitle=点击关闭class=ad_offtitle=点击打开>

连接数据库，然后循环产品功能列表。

CSS

为了使页面更美观，我们使用CSS美化页面，使页面更加人性化，用CSS，我们只需要一张图片来识别开关按钮。
复制代码代码如下所示：
。表{填充：6px 4px；底部边框：1px点缀# d3d3d3；位置：相对}
。fun_title {身高：28px；线高度：28px }
。fun_title跨度{宽度：82px；身高：25px；背景：URL（开关。GIF）不重复；
鼠标指针；位置：绝对的；右：6px；顶部：16px }
。fun_title跨度。ad_on {背景位置：0 2px }
。fun_title跨度。ad_off {背景位置：0 38px }
。fun_title h3 {字体大小：14px；字体家庭：'microsoft雅黑；}
。单P {线高度：20px }
。单P跨{颜色：# F60 }
背景：# FFC。cur_select { }
CSS代码，我不想详细说明，提示我们使用图片，然后通过背景位置找到图片的位置。这是大多数网站使用的方式，我不会提到好处。

jQuery

通过点击开关按钮，我们要求后台及时改变相应的功能开关的状态。这个过程是一个典型的Ajax应用程序。通过点击按钮开关，前端发送POST请求到后台PHP，后台接收到请求，查询数据库，并将结果返回给前端，前端jQuery改变按钮的状态根据实际背景返回。

复制代码代码如下所示：
$（函数（）{（））
鼠标改变颜色。
Hover（函数（）{）
$（这）。AddClass（cur_select ）；
}函数（）{（）
$（这）。RemoveClass（cur_select ）；
}）；

关闭
$（。ad_on）。活（单击
add_on = $（this）功；
无功status_id =美元（这）。Attr（关系）；
美元。
如果（数据= 1）{
add_on.removeclass（ad_on）。AddClass（ad_off ）Attr（标题。
其他{ }
警报（数据）；
}
}）；
}）；
打开
$(.Ad_off).Live (click
add_off = $（this）功；
无功status_id =美元（这）。Attr（关系）；
美元。
如果（数据= 1）{
add_off.removeclass（ad_off）。AddClass（ad_on ）Attr（标题。
其他{ }
警报（数据）；
}
}）；
}）；
}）；
代码，实现了鼠标功能列表换色功能第一（见演示），然后单击按钮，要求背景action.php发送Ajax，通过相应的功能参数提交ID和类型，用于背景类型区分请求功能和要求（打开和关闭）。事实上，你可以看到，根据Ajax请求成功返回，开关按钮动态变化的方式实现改变开关状态的功能。

action.php

背景action.php接收前端的要求，根据参数执行SQL语句，更新相应的功能状态，并将结果返回给前端成功后。

复制代码代码如下所示：
require_once（'connect。php）；
ID = _post美元美元'status'} {；
类型=美元美元_post {类型}；
如果（$ = 1）{关闭
在id=id中的更新亲集状态= 0；
}否则打开
在id=id中的更新亲集状态= 1；
}
RS = mysql_query美元（$ SQL）；
如果（$ RS）{
回声1；
其他{ }
服务器忙，请稍后再试！；
}