JavaScript 实例：当当网点击展开效果

来源：互联网发布：淘宝客服面试注意事项编辑：程序博客网时间：2024/06/04 20:07

关键代码：

<script type="text/javascript">function shopping_commend_show(imgObj){/*通过改变css的display属性值来实现展开收起的效果(1)更换单击的小箭头图片(2)更换内容的display属性的值*///获id=shopping_commend_sort的元素对象var divObj = document.getElementById("shopping_commend_sort");//判断divObj的display属性的值if(divObj.style.display == "block"){//更改其值为none，隐藏起来divObj.style.display = "none";imgObj.src = "images/shopping_arrow_down.gif";}else{//显示出来divObj.style.display = "block";imgObj.src = "images/shopping_arrow_up.gif";}}</script>

完整代码：

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head><meta http-equiv="Content-Type" content="text/html; charset=gb2312" /><title>当当网购物车页面</title>  <style type="text/css">  body{margin:0px;padding:0px;font-size:12px;line-height:20px;color:#333;   }   ul,li{list-style:none;margin:0px;padding:0px;}.shopping_commend{background-image:url(../images/shopping_commend_bg.gif);background-repeat:repeat-x;height:21px;border:solid 1px #999;}.shopping_commend_left{float:left;padding-left:10px;}.shopping_commend_right{float:right;padding-right:10px;margin-top:3px;}.shopping_commend_right img{cursor:pointer;}#shopping_commend_sort{border:solid 1px #999;border-top:0;padding:5px 20px 5px 20px;height:120px;}.shopping_commend_sort_left{float:left;width:450px;}.shopping_commend_sort_mid{float:left;width:15px;background-image:url(../images/shopping_dotted.gif);background-repeat:repeat-y;height:120px;}.shopping_commend_list_1,.shopping_commend_list_2,.shopping_commend_list_3,.shopping_commend_list_4{float:left;height:30px;line-height:30px;}.shopping_commend_list_1{width:240px;}.shopping_commend_list_2{width:70px;text-align:center;text-decoration:line-through;color:#999;}.shopping_commend_list_3{width:70px;text-align:center;}.shopping_commend_list_4{text-align:center;width:65px;}  </style>  <script type="text/javascript">function shopping_commend_show(imgObj){/*通过改变css的display属性值来实现展开收起的效果(1)更换单击的小箭头图片(2)更换内容的display属性的值*///获id=shopping_commend_sort的元素对象var divObj = document.getElementById("shopping_commend_sort");//判断divObj的display属性的值if(divObj.style.display == "block"){//更改其值为none，隐藏起来divObj.style.display = "none";imgObj.src = "images/shopping_arrow_down.gif";}else{//显示出来divObj.style.display = "block";imgObj.src = "images/shopping_arrow_up.gif";}}  </script></head><body>  <!--为您推荐商品开始-->  <div class="shopping_commend" style="width:960px;  margin:0px auto;">     <div class="shopping_commend_left">根据您挑选的商品，当当为您推荐</div>     <div class="shopping_commend_right"> <img onClick="shopping_commend_show(this)" src="images/shopping_arrow_up.gif" alt="shopping" ></div>  </div>  <div id="shopping_commend_sort" style="display:block; width:960px; margin:0px auto;padding:0px;">   <div class="shopping_commend_sort_left">    <ul>      <li class="shopping_commend_list_1">·<a href="#" class="blue">JavaScript DOM编程艺术</a></li>      <li class="shopping_commend_list_2">￥39.00</li>      <li class="shopping_commend_list_3">￥29.30</li>      <li class="shopping_commend_list_4"><a href="#" class="shopping_yellow">购买</a></li>    </ul>     <ul>      <li class="shopping_commend_list_1">·<a href="#" class="blue">解禁（当当网独家首发）</a></li>      <li class="shopping_commend_list_2">￥28.00</li>      <li class="shopping_commend_list_3">￥19.40</li>      <li class="shopping_commend_list_4"><a href="#" class="shopping_yellow">购买</a></li>    </ul>     <ul>      <li class="shopping_commend_list_1">·<a href="#" class="blue">地王之王（金融危机下房地产行...</a></li>      <li class="shopping_commend_list_2">￥32.80</li>      <li class="shopping_commend_list_3">￥25.10</li>      <li class="shopping_commend_list_4"><a href="#" class="shopping_yellow">购买</a></li>    </ul>     <ul>      <li class="shopping_commend_list_1">·<a href="#" class="blue">逃庄</a></li>      <li class="shopping_commend_list_2">￥36.00</li>      <li class="shopping_commend_list_3">￥27.70</li>      <li class="shopping_commend_list_4"><a href="#" class="shopping_yellow">购买</a></li>    </ul>   </div>   <div class="shopping_commend_sort_mid"></div>   <div class="shopping_commend_sort_left">     <ul>      <li class="shopping_commend_list_1">·<a href="#" class="blue">深入浅出MySQL数据库开发、优...</a></li>      <li class="shopping_commend_list_2">￥59.00</li>      <li class="shopping_commend_list_3">￥47.20</li>      <li class="shopping_commend_list_4"><a href="#" class="shopping_yellow">购买</a></li>    </ul>     <ul>      <li class="shopping_commend_list_1">·<a href="#" class="blue">大玩家（马未都、王刚推荐!央...</a></li>      <li class="shopping_commend_list_2">￥34.80</li>      <li class="shopping_commend_list_3">￥20.60</li>      <li class="shopping_commend_list_4"><a href="#" class="shopping_yellow">购买</a></li>    </ul>     <ul>      <li class="shopping_commend_list_1">·<a href="#" class="blue">都市风水师--官场风水小说：一...</a></li>      <li class="shopping_commend_list_2">￥39.80</li>      <li class="shopping_commend_list_3">￥30.50</li>      <li class="shopping_commend_list_4"><a href="#" class="shopping_yellow">购买</a></li>    </ul>     <ul>      <li class="shopping_commend_list_1">·<a href="#" class="blue">国戏（以麻将术语解读宦海沉浮...</a></li>      <li class="shopping_commend_list_2">￥25.00</li>      <li class="shopping_commend_list_3">￥17.30</li>      <li class="shopping_commend_list_4"><a href="#" class="shopping_yellow">购买</a></li>    </ul>    </div>  </div>   </body></html>

阅读全文

0 0

JavaScript 实例：当当网 点击展开效果

JavaScript 实例：当当网点击展开效果