工作准备为了更好地演示这个例子，我们需要一个数据表来记录所需的功能描述和打开状态。表结构如下：复制的代码如下： create table ` pro '(` id ` int(11)NOT NULL auto _ increment，` title`varchar (50) not null，` description ` varchar(200)NOT NULL，` status ` tinyint(1)NOT NULL DEFAULT ' 0 '，PRIMARY KEY(` id `)) ENGINE=MyISAM DEFAULT CHARSET=utf8；您可以在table pro中插入几条数据。Index.php会在页面上显示相关函数的列表，用PHP读取数据表，并以列表的形式显示出来。复制代码如下：PHP require _ once(' connect . PHP ')；//连接到数据库$ query=MySQL _ query(‘按id ASC从pro订单中选择*)；while($ row=MySQL _ fetch _ array($ query)){？div class=' list ' div class=' fun _ title ' span rel='？PHP echo $ row[' id ']；php if($row['status']==1){？Class='ad_on' title='单击关闭'？php }else{？Class='ad_off' title='点击打开'？php }？/span h3？PHP echo $ row[' title ']；/h3 /div p？PHP echo $ row[' description ']；/p /div？php }？连接到数据库，然后循环显示产品功能列表。为了用CSS渲染出更好的页面外观，我们用CSS来美化页面，让页面更人性化。有了CSS，我们只需要一张图片就可以识别开关按钮。

复制的代码如下： list { padd :6 px 4px；border-bottom:1px虚线# d3d3d3位置：relative}。fun _ title { height:28px线高：28px}。fun _ title span { width:82pxheight:25pxbackground:url(switch.gif)不重复；cursor:pointer指针；位置：绝对；right:6pxtop:16px}。fun _ title span . ad _ on { background-position :0-2px }。fun _ title span . ad _ off { background-position :0-38px }。fun _ title H3 { font-size :14 px；font-family:“微软雅黑”；}.列出p {行高：20px}。列出p span {color: # f60}。cur _ select { background 3360 # ffc } CSS代码。我不想细说。我想提醒大家，我们用了一张图片，然后用背景-位置来定位图片的位置，这是大多数网站都用的方法。JQuery我们可以通过点击切换按钮来及时请求后台改变相应的功能切换状态。这个过程是典型的Ajax应用程序。通过点击切换按钮，前端向后台PHP发送post请求，后台接收请求，查询数据库，并将结果返回给前端。前端jQuery根据后台返回的结果改变按钮状态。复制代码如下：$(function(){ //鼠标滑动改变颜色$(')。列表')。悬停(function () {$ (this))。add class(' cur _ select ')；}，function(){ $(this)。remove CLaSS(' cur _ select ')；});//关闭$('。ad _ on’)。live ('click '，function(){ var add _ on=$(this)；var status_id=$(this)。attr(' rel ')；$.post ('action.php '，{ status:status _ id，type33601}，function(data){ if(data==1){ add _ on . remove class(' ad _ on ')。addclass ('ad _ off ')。attr('。}else{ alert(数据)；} });});//open $('。ad _ off’)。live ('click '，function(){ var add _ off=$(this)；var status_id=$(this)。attr(' rel ')；$.post('action.php '，{ status:status _ id，type:2}，function(data){ alert(data)；If(数据==1) {add _ off。removeclass ('ad _ off ')。addclass ('ad _ on ')。attr ('title '，'点击关闭')；}else{ alert(数据)；} });});});说明，在代码中，首先实现了鼠标滑动到功能列表改变颜色的功能(详见演示)，然后点击切换按钮，向后台action.php发送一个Ajax请求。提交的参数是对应功能的id和类型，用于区分后台请求哪个功能和请求的类型(打开和关闭)。其实大家注意一下，可以看到在按照Ajax请求成功返回结果后，切换按钮动态改变样式，实现了改变切换状态的功能。action.php后台的Action.php接收前端的请求，根据参数执行SQL语句，更新相应函数的状态，成功后将结果返回给前端。请看代码：复制代码如下： require _ once(' connect . PHP ')；$id=$_POST['状态']；$ type=$ _ POST[' type ']；如果($ type==1){//close $ SQL=' update pro set status=0，其中id='。$ id} else {//open $ SQL=' update pro set status=1，其中id='。$ id} $ RS=MySQL _ query($ SQL)；if($ RS){ echo ' 1 '；}else{ echo '服务器正忙，请稍后再试！}