jsp中js实现点击按钮更改背景图片代码怎么写?

jsp中分上下个两个DIV,各自有自己的初始背景颜色,并有文字三个按钮,点击“按钮1”上下两个DIV中的背景同时更换成两个不同的图片点击“按钮2”同上以此类推但是文字还在... jsp中分上下个两个DIV,各自有自己的初始背景颜色,并有文字
三个按钮,点击“按钮1” 上下两个DIV中的背景同时更换成两个不同的图片
点击“按钮2” 同上
以此类推
但是文字还在,只是背景图片改变
展开
 我来答
大大的Wiener
推荐于2019-09-21 · TA获得超过6.4万个赞
知道大有可为答主
回答量:392
采纳率:90%
帮助的人:33.2万
展开全部

代码如下:

<style type="text/css" media="all">

#aa{ height:300px; width:300px; margin:o auto;}

#a1{ height:250px; width:300px; border:1px solid #0099CC; color:#000000; font-size:18px;}

#a2{ height:50px; width:300px; }

</style>

<script type="text/javascript">

function bb(o){

var dom = document.getElementById("a1");

if(parseInt(o)==1){

dom.style.cssText = "background-color:#009900;";

}else if(parseInt(o)==2){

dom.style.cssText = "background-color:#FFFF00;";

}else{

dom.style.cssText = "background-color:#FF0000;";

}

}

</script>

</head>

<body>

<div id="aa">

<div id="a1">div中的字体哦</div>

<div id="a2">

<input type="button" value="点击1" onclick="bb(1)" />

<input type="button" value="点击2" onclick="bb(2)" />

<input type="button" value="点击3" onclick="bb(3)" />

</div>

</div>

</body>

补充说明:

JSP全名为Java Server Pages,中文名叫java服务器页面,其根本是一个简化的Servlet设计,它 是由Sun Microsystems公司倡导、许多公司参与一起建立的一种动态网页技术标准。JSP技术有点类似ASP技术,它是在传统的网页HTML(标准通用标记语言的子集)文件(*.htm,*.html)中插入Java程序段(Scriptlet)和JSP标记(tag),从而形成JSP文件,后缀名为(*.jsp)。 用JSP开发的Web应用是跨平台的,既能在Linux下运行,也能在其他操作系统上运行。

百度网友3cb8a8b
2018-01-05 · TA获得超过371个赞
知道小有建树答主
回答量:375
采纳率:0%
帮助的人:332万
展开全部
<script>
function mychange(num){
document.getElementById("div1").style.backgroundImage="url("+num+".jpg)";
document.getElementById("div2").style.backgroundImage="url("+num+".jpg)";
}
</script>
</head>

<body>
<div id="div1" style="height:200px; width:200px; background:#FF0000">这是第一个div</div>
<div id="div2" style="height:200px; width:200px; background:#0000FF">这是第二个div</div>
<input type="button" value="第一个按钮" onclick="mychange(1)" />
<input type="button" value="第二个按钮" onclick="mychange(2)" />
<input type="button" value="第三个按钮" onclick="mychange(3)" />
</body>
已赞过 已踩过<
你对这个回答的评价是?
评论 收起
推荐律师服务: 若未解决您的问题,请您详细描述您的问题,通过百度律临进行免费专业咨询

为你推荐:

下载百度知道APP,抢鲜体验
使用百度知道APP,立即抢鲜体验。你的手机镜头里或许有别人想知道的答案。
扫描二维码下载
×

类别

我们会通过消息、邮箱等方式尽快将举报结果通知您。

说明

0/200

提交
取消

辅 助

模 式