<!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改写成一个函数，该怎样写？
2 回答
已采纳
李晓健
TA贡献1036条经验 获得超461个赞
<script>
var dd=document.getElementsByTagName("dd")
function app(el){
for(i=0;i<dd.length;i++){
dd[0].className="";
dd[1].className=""
dd[2].className=""
}
el.className="selected";
}
</script>
</head>
<body>
<dl>
<dt>配送类型：</dt>
<dd class="selected" onclick="app(this)"><a href="#">全部</a></dd>
<dd onclick="app(this)"><a href="#">京东配送</a></dd>
<dd onclick="app(this)"><a href="#">第三方配送</a></dd>
</dl>
</body>上面那个写错了
李晓健
TA贡献1036条经验 获得超461个赞
<script>
var dd=document.getElementsByTagName("dd")
function app(type,el){
for(i=0;i<dd.length;i++){
dd[0].className="";
dd[1].className=""
dd[2].className=""
}
el.className="selected";
}
</script>
</head>
<body>
<dl>
<dt>配送类型：</dt>
<dd class="selected" onclick="app(this)"><a href="#">全部</a></dd>
<dd onclick="app(this)"><a href="#">京东配送</a></dd>
<dd onclick="app(this)"><a href="#">第三方配送</a></dd>
</dl>
</body>可以试试
添加回答
举报
0/150
提交
取消