<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> <title>练习</title> <style> *{font-size:12px} dl{width:400px;height:30px;border:1px solid #EEE;line-height:30px;margin:40px auto;} dd,dt{float:left;margin:0 10px} dt{margin-left:15px} dl dd a{display:block;padding:0px 20px;text-decoration:none;position:relative} dl dd a:hover{color:red;text-decoration:underline;} .selected{background-color:blue;} </style> <script> var dd=document.getElementsByTagName("dd") function app(){ for(i=0;i<dd.length;i++){ dd[0].className="selected"; dd[1].className="" dd[2].className="" } } function bpp(){ for(i=0;i<dd.length;i++){ dd[0].className=""; dd[1].className="selected" dd[2].className="" } } function cpp(){ for(i=0;i<dd.length;i++){ dd[0].className=""; dd[1].className="" dd[2].className="selected" } } </script> </head> <body> <dl> <dt>配送类型:</dt> <dd class="selected" onclick="app()"><a href="#">全部</a></dd> <dd onclick="bpp()"><a href="#">京东配送</a></dd> <dd onclick="cpp()"><a href="#">第三方配送</a></dd> </dl> </body> </html>
这样写很麻烦,能不能简化成简单的写法,就是js改写成一个函数,该怎样写?
李晓健
李晓健
相关分类