一键切换

index.php

　　<meta content="initial-scale=1.0,user-scalable=no,maximum-scale=1,width=device-width" name="viewport"/>
　　<meta content="initial-scale=1.0,user-scalable=no,maximum-scale=1" media="(device-height: 568px)" name="viewport"/>

<style>
.list{padding:6px 4px; border-bottom:1px dotted #d3d3d3; position:relative} 
.fun_title{height:28px; line-height:28px} 
.fun_title span{width:82px; height:25px; background:url(switch.gif) no-repeat;  
cursor:pointer; position:absolute; right:6px; top:16px} 
.fun_title span.ad_on{background-position:0 -2px} 
.fun_title span.ad_off{background-position:0 -38px} 
.fun_title h3{font-size:14px; font-family:'microsoft yahei';} 
.list p{line-height:20px} 
.list p span{color:#f60} 
.cur_select{background:#ffc} 
</style>
    <script src="http://libs.baidu.com/jquery/1.9.0/jquery.js"></script>
<?php 
   require_once('connect.php'); //连接数据库 
   $query=mysql_query("select * from pro order by id asc"); 
   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
}
?>
<script>
    $(function(){ 
    //鼠标滑向换色 
    $(".list").hover(function(){ 
        $(this).addClass("cur_select"); 
    },function(){ 
        $(this).removeClass("cur_select"); 
    }); 
     
    //关闭 
    $(".list").on("click",'.ad_on',function(){ 
        var add_on = $(this); 
        var status_id = $(this).attr("rel"); 
        $.post("action.php",{status:status_id,type:1},function(data){ 
            if(data==1){ 
                add_on.removeClass("ad_on").addClass("ad_off").attr("title","点击开启"); 
            }else{ 
                alert(data); 
            } 
        }); 
    }); 
    //开启 
    $(".list").on("click",'.ad_off',function(){ 
        var add_off = $(this); 
        var status_id = $(this).attr("rel"); 
        $.post("action.php",{status:status_id,type:2},function(data){
            if(data==1){ 
                add_off.removeClass("ad_off").addClass("ad_on").attr("title","点击关闭"); 
            }else{ 
                alert(data); 
            } 
        }); 
    }); 
}); 
</script>

action.php

　　require_once('connect.php'); 
    $id = $_POST['status']; 
    $type = $_POST['type']; 
    if($type==1){ //关闭 
        $sql = "update pro set status=0 where id=".$id; 
    }else{ //开启 
        $sql = "update pro set status=1 where id=".$id; 
    } 
    $rs = mysql_query($sql); 
    if($rs){ 
        echo '1'; 
    }else{ 
        echo '服务器忙，请稍后再试！'; 
    } 

connect.php

<?php
$host="localhost";
$db_user="root";
$db_pass="root";
$db_name="pro";
$timezone="Asia/Shanghai";

$link=mysql_connect($host,$db_user,$db_pass);
mysql_select_db($db_name,$link);
mysql_query("SET names UTF8");

header("Content-Type: text/html; charset=utf-8");
date_default_timezone_set($timezone); //北京时间
?>

sql.sql

CREATE TABLE IF NOT EXISTS `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 AUTO_INCREMENT=6 ;

--
-- 转存表中的数据 `pro`
--

INSERT INTO `pro` (`id`, `title`, `description`, `status`) VALUES
(1, '上网安全防护', '上网不中招，拦截挂马钓鱼网站', 0),
(2, '聊天安全防护', '拦截通过聊天工具传送的木马', 0),
(3, '下载安全防护', '拦截下载文件中的木马', 1),
(4, 'U盘安全防护', '拦截U盘中的木马', 1),
(5, '黑客入侵防护', '锁定黑客入侵点，拦截黑客入侵', 1);