DW中编辑在IE浏览器中看不到效果,说是限制脚本,设置了也不好使,是我没做出效果吗?
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <title>无标题文档</title> <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <title>无标题文档</title> <style type="text/css"> *{margin:0px;padding:0px;} body{font:"微软雅黑";font-size:14px;} a{text-decoration:none;} ul,li{list-style:none;} #box{height:auto;width:550px;border:1px solid #aaa;margin:0 auto;overflow:hidden;} .top{height:40px;} .top a{height:16px; width:16px;display:block;float:right;margin:5px;} .btn-list-off{background:#fff url(http://img1.sycdn.imooc.com//53352d61000153cc00710057.jpg) no-repeat -38px 0px;} .btn-car-on{background:#fff url(http://img1.sycdn.imooc.com//53352d61000153cc00710057.jpg) no-repeat -21px -34px;} .btn-list-on{background:#fff url(http://img1.sycdn.imooc.com//53352d61000153cc00710057.jpg) no-repeat -21px 0px;} .btn-car-off{background:#fff url(http://img1.sycdn.imooc.com//53352d61000153cc00710057.jpg) no-repeat -38px -32px;} #box ul li{height:auto;width:164px;border:1px solid #aaa;float:left;margin:7px;} .a-img{height:164px;width:164px;display:block;overflow:hidden;} p a,p span{ display:block; line-height:23px; padding-left:10px; } .bottom{height:40px;line-height:40px;text-align:center;background-color:#ccc;} .small{height:50px;width:50px;float:left;margin:5px;} </style>
<script type="text/javascript"> // 添加页面加载完成时的事件,然后执行以下代码。 var listBtn = document.getElementById("btn1"); var carBtn = document.getElementById("btn2");
window.onload =function(){
var listbtn=document.getElementById("btn1");
var carbtn=document.getElementById("btn2");
var imgs=document.getElementsByIdTagName("img")
// 获取多个图片对象
listBtn.onclick = function(){
// 改变按钮的class的值 // 改变每一个图片的路径以及它的对应的父节点的class的值 }
listBtn.onclick = function(){
listBtn.className = "btn-list-off";
carBtn.className = "btn-car-on";
for(var i=0;i<imgs.length;i++)
{ imgs[i].src = "http://img1.sycdn.imooc.com//53ab7d16000159a801640236.jpg";
imgs[i].parentNode.className = "a-img small"; } }
</script>
</head>
<body>
<div id="box">
<div class="top">
<a href="#" title="列表模式" id="btn1" class="btn-list-off"></a>
<a href="#" title="卡片模式" id="btn2" class="btn-car-on"></a>
</div>
<ul> <li>
<div class="con">
<a href="#" class="a-img ">
<img src="http://img1.sycdn.imooc.com//53ab7d16000159a801640236.jpg" />
</a>
<p> <a href="#">白阳</a> <span>辽宁</span> <span>21个共同好友</span> </p> </div> <div class="bottom"> 未分组的好友 </div> </li>
<li> <div class="con"> <a href="#" class="a-img"> <img src="http://img1.sycdn.imooc.com//53ab7d16000159a801640236.jpg"/> </a> <p> <a href="#">白阳</a> <span>辽宁</span> <span>21个共同好友</span> </p> </div> <div class="bottom"> 未分组的好友 </div> </li>
<li> <div class="con"> <a href="#" class="a-img"> <img src="http://img1.sycdn.imooc.com//53ab7d16000159a801640236.jpg"/> </a> <p> <a href="#">白阳</a> <span>辽宁</span> <span>21个共同好友</span> </p> </div> <div class="bottom"> 未分组的好友 </div> </li>
<li> <div class="con"> <a href="#" class="a-img"> <img src="http://img1.sycdn.imooc.com//53ab7d16000159a801640236.jpg"/> </a> <p> <a href="#">白阳</a> <span>辽宁</span> <span>21个共同好友</span> </p> </div> <div class="bottom"> 未分组的好友 </div> </li>
<li> <div class="con"> <a href="#" class="a-img"> <img src="http://img1.sycdn.imooc.com//53ab7d16000159a801640236.jpg"/> </a> <p> <a href="#">白阳</a> <span>辽宁</span> <span>21个共同好友</span> </p> </div> <div class="bottom"> 未分组的好友 </div> </li>
<li> <div class="con"> <a href="#" class="a-img"> <img src="http://img1.sycdn.imooc.com//53ab7d16000159a801640236.jpg"/> </a> <p> <a href="#">白阳</a> <span>辽宁</span> <span>21个共同好友</span> </p> </div> <div class="bottom"> 未分组的好友 </div> </li>
</ul> </div> </body> </html>