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

最新推荐文章于 2024-06-18 11:26:21 发布

houyanhua1

最新推荐文章于 2024-06-18 11:26:21 发布

阅读量1.4k

点赞数

分类专栏： JavaScript 文章标签： javascript

本文链接：https://blog.youkuaiyun.com/houyanhua1/article/details/78554849

版权

本文介绍如何利用JavaScript实现类似当当网商品详情页面的点击展开效果。通过关键代码展示，读者可以了解到如何操作DOM元素，响应用户点击事件以及动态更新页面内容。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

关键代码：

<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_ri