一键切换

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);