CSS中点击图片出现对应的文字
1个回答
2017-06-15 · 百度知道合伙人官方认证企业
育知同创教育
1【专注：Python+人工智能|Java大数据|HTML5培训】 2【免费提供名师直播课堂、公开课及视频教程】 3【地址：北京市昌平区三旗百汇物美大卖场2层，微信公众号：yuzhitc】
向TA提问
关注
![]()
展开全部
大体类似于这样试试
<frameset cols="20%,*">
<frame src="1.html" />
<frame src="2.html" />
</frameset>
1.html
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
<script type="text/javascript">
function init(){
var p=document.getElementsByTagName("p");
for(var i=0;i<p.length;i++){
p[i].onclick=test;
}
}
function test(){
var src=this.getAttribute("src");
var img=window.parent.frames[1].document.images[0];
img.setAttribute("src",src);
}
window.onload=init;
</script>
</head>
<body>
<p src="1.jpg">test1</p>
<p src="2.jpg">test2</p>
</body>
</html>
2.html
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
</head>
<body>
<img src="3.jpg" />
</body>
</html>
<frameset cols="20%,*">
<frame src="1.html" />
<frame src="2.html" />
</frameset>
1.html
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
<script type="text/javascript">
function init(){
var p=document.getElementsByTagName("p");
for(var i=0;i<p.length;i++){
p[i].onclick=test;
}
}
function test(){
var src=this.getAttribute("src");
var img=window.parent.frames[1].document.images[0];
img.setAttribute("src",src);
}
window.onload=init;
</script>
</head>
<body>
<p src="1.jpg">test1</p>
<p src="2.jpg">test2</p>
</body>
</html>
2.html
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
</head>
<body>
<img src="3.jpg" />
</body>
</html>
追问
还是有点不明白
已赞过
已踩过<
评论
收起
你对这个回答的评价是？
推荐律师服务：
若未解决您的问题，请您详细描述您的问题，通过百度律临进行免费专业咨询
