用JS实现鼠标点击a链接标签时，在另外一个DIV显示出该内容

稿源：互联网 2018-09-21 01:06:24 点击： 23469 撤稿纠错

如何用JS实现：鼠标点击一个DIV里的a标签时，在另外一个DIV显示出该a标签的内容，适合刚开始学JS的新学参考学习。

以下讨论的是和鼠标点击链接标签相关的用JS实现鼠标点击a链接标签时，在另外一个DIV显示出该内容教程文章，内容是本站精心挑选整理的教程，希望对广大的网友给到帮助,下面是详细内容：

脚本代码(For Alixixi.com)如下:

<!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>
<style>
#div0{
        width:700px;
        height:500px;}
#div1{
        width:300px;
        height:200px;
        float:left;
        background-color:#CCCCCC;}
#div2{
        width:300px;
        height:200px;
        float:right;
        background-color:#F00;}

</style>
<script type="text/javascript">
        window.onload=function(){
                var oto1=document.getElementById('div1');
                var oto2=oto1.getElementsByTagName('li');
                var oto3=document.getElementById('div2');
                for(var i=0;i<oto2.length;i++){
                        oto2[i].index=i;
                        oto2[i].onclick=function(){
                                oto3.innerHTML=oto2[this.index].innerHTML;
                                
                                
                                }
                        }
                }
</script>
</head>

<body>
<div id="div0">
<div id="div1">
<ul>
  <li><a href="#">1</a></li>
  <li><a href="#">2</a></li>
  <li><a href="#">3</a></li>
  <li><a href="#">4</a></li>
  <li><a href="#">5</a></li>
</ul>
</div>
<div id="div2"></div>
</div>
</body>
</html>

关于用JS实现鼠标点击a链接标签时，在另外一个DIV显示出该内容的内容写到这里就结束啦，您可以收藏本页网址https://js.alixixi.com/a/2018092185402.shtml方便下次再访问哦。

·上一篇： 图片延时加载原生JS特效广告代码
·下一篇： 带缓冲效果的向上翻转轮播的图片广告特效代码

用JS实现鼠标点击a链接标签时，在另外一个DIV显示出该内容

文章分类LIST >>返回首页

最新游戏

最新新闻