黑马程序员技术交流社区
标题: 【上海校区】点击按钮显示div并向div中传递参数 [打印本页]
作者: 梦缠绕的时候 时间: 2018-7-27 15:34
标题: 【上海校区】点击按钮显示div并向div中传递参数
针对菜单显示的内容，点击每一个按钮后，需要显示详细信息，详情页是一个div,点击一行才会显示，显示的内容则是根据选中的按钮。
引申出来，比如一个订单列表，点击一行，则弹出一个div展示订单详情，而详情内容则是根据点击的那一行的内容来确定，于是需要传递参数。
实现效果如下：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>根据点击按钮的不同显示不同的相同的div并传递参数</title>
<script type="text/javascript" src="http://libs.baidu.com/jquery/2.0.0/jquery.js"></script>
</head>
<body>
<button id="" class="a" value="a1">红色</button>
<button id="" class="a" value="a2">蓝色</button>
<button id="" class="a" value="a3">粉色</button>
<button id="" class="a" value="a4">紫色</button>
<div id = "dis" class="dis" style="width: 200px;height: 200px;display: none;">
<p id="p">玩命加载中。。。。</p>
</div>
</body>
<script type="text/javascript">
window.onload = function () {
//获取class="a"的所有元素
var btn = $(".a");
//当元素被点击的时候，把其他元素的id删除掉，再把当前点击的元素加上一个id
btn.click(function(){
btn.removeAttr("id")
$(this).attr("id","a")
switch ($("#a").text()){
case "红色":viewdiv($("#a").text(),1000,500,"red");
break;
case "蓝色":viewdiv($("#a").text(),1000,500,"blue");
break;
case "粉色":viewdiv($("#a").text(),1000,500,"pink");
break;
case "紫色":viewdiv($("#a").text(),1000,500,"#a34bda");
break;
default:
break;
}
})
function viewdiv(s,width,height,background){
$("#dis").css("background",background);
$("#dis").css("width",width);
$("#dis").css("height",height);
$("#dis").css("height",height);
$("#dis").fadeIn("slow")
$("#dis #p").text("欢迎 "+s+" 按钮");
}
}
</script>
</html>
作者: wuqiong 时间: 2018-7-30 10:12
作者: 不二晨 时间: 2018-7-30 11:30
奈斯，很赞
| 欢迎光临 黑马程序员技术交流社区 (http://bbs.itheima.com/) |
黑马程序员IT技术论坛 X3.2 |