<?php header("content-type:text/html;charset=utf-8"); $dsn = "mysql:host=localhost;dbname=test"; $db = new PDO($dsn, 'root', 'root'); $db->query("set names utf8"); $ban=$db->query("select * from df_goods")->fetchAll(PDO::FETCH_ASSOC); $arr=$db->query("select * from df_attr")->fetchAll(PDO::FETCH_ASSOC); //print_r($arr); ?> <!doctype html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>Document</title> <style> .ban{ border: solid red 3px; } .zi{ border: solid red 3px; } </style> </head> <body> <center> <img src="https://ss0.bdstatic.com/70cFvHSh_Q1YnxGkpoWK1HF6hhy/it/u=1276780138,3811681638&fm=27&gp=0.jpg" width="200px" height="200px"><br> 版本:<?php foreach ($ban as $bk=>$bv){?> <span class="ban"><?=$bv['name']?></span> <?php }?> <br><br> <?php foreach ($arr as $ak=>$av){ echo $av['name'].": "; $data=$db->query("select * from df_relation_goods_attr where attr_id=".$av['id'])->fetchAll(PDO::FETCH_ASSOC); foreach ($data as $k=>$v){ echo "<i class='zi'>".$v['value']."</i> "; } echo "<br><br>"; }?> </center> </body> </html> <script src="http://apps.bdimg.com/libs/jquery/1.6.4/jquery.js"></script> <script> $(".ban").click(function () { if($(this).attr("class").indexOf("ban")>(-1)){ $(this).removeClass("ban"); }else{ $(this).addClass("ban"); } }); $(".zi").click(function () { if($(this).attr("class").indexOf("zi")>(-1)){ $(this).removeClass("zi"); }else{ $(this).addClass("zi"); } }) </script>