好友列表
内联>内嵌>外部
<head> <style type="text/css"> * { margin:0px auto; //去除元素自带的边距 auto 自动居中 padding:0px; //去掉默认的内边距 font-family:微软雅黑; //设置字体 } #list { width:350px; height:400px; } .py { margin:10px 0px 0px 0px; width:350px; height:35px; } .py:hover //悬浮状态的效果 { background-color:#639; color:#FFF;//设置字体颜色 cursor:pointer; //光标指针形状 } .img { width:35px; height:35px; float:left; //靠左浮动 在一行上 } .nc { float:left; //靠左流 在一行 height:35px; margin:0px 0px 0px 20px; //上右下左边距 line-height:35px; //设置行高 ，与height 相同 vertical-align:middle; //垂直对齐 ，与line-height 结合使用 } <style/> </head> <body> <?php $uid= "1414141414"; ?> <div id="list"> <?php $db = new MySQLi("localhost","root","123","lianxi"); !mysqli_connect_error() or die("连接失败"); $sql = "select Friends from friends where Uid = '{$uid}'"; $result = $db->query($sql); $attr = $result->fetch_all(); for($i = 0;$i<count($attr);$i++) { //朋友的用户名 $fuid = $attr[$i][0]; //查ueser表，根据朋友的UID查出头像和昵称 $sqlf = "select NickName,Pic from Users where Uid='{$fuid}'"; $resultf = $db->query($sqlf); $attrf = $resultf->fetch_row(); echo "<div onclick='ShowCode(this)' class='py' bs='{$fuid}'> //bs='' 自定义属性 this 传div本身 this写在哪里就代表它本身 <img class='img' src='{$attrf[1]}'/> //用class 不能用id html中不允许id 重复 <div class='nc'>{$attrf[0]}</div> </div>"; } ?> </div> <script type="text/javascript"> function ShowCode(div) { var d = document.getElementsByClassName("py"); //得到类似数组的集合 for(var i =0;i<d.length;i++) { d[i].style.backgroundColor = "#FFF"; d[i].style.color = "#000"; } div.style.backgroundColor = "#639"; //改背景色 div.style.color = "#FFF"; //改字体颜色
alert(div.getAttribute("bs"));
} </sctript> </body>