2 lv qinyu lv_qinyu 于 2016.09.13 22:50 提问

如何用JS实现:鼠标点击一个DIV里的a标签时,在另外一个DIV显示出该a标签的内容

刚开始学JS,然后网站中需要一个效果,就是点击左边DIV里的超链接,然后把这个超链接的内容(也就是之间的内容)显示在另一个DIV里面,求助前辈~~为什么我写的出不来呢?

 <!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;
    border:3px #000000 solid;}
#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.onclick=function(){
                                oto3.innerHTML=this.innerHTML;
                                }
            }
        }
</script>
</head>

<body>
<div id="div0">
<div id="div1">
 <ul>
  <li><a href="#">oh my</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>

前辈看看是不是我哪里出错了

6个回答

qq_29594393
qq_29594393   Ds   Rxr 2016.09.13 23:07
已采纳

改成这样,
1.想用id选择下面的节点,应该用child ,或者直接选择那个标签
2.循环绑定对象时,那是一个数组,所以用[]引用,

  window.onload=function(){
        var oto2=document.getElementsByTagName('li');
        var oto3=document.getElementById('div2');
        for(var i=0;i<oto2.length;i++){
            oto2[i].onclick=function(){
                                oto3.innerHTML=this.innerHTML;
                                }
            }
        }
zhuzige521888
zhuzige521888   2016.09.13 23:09
     oto2.onclick=function(){

==> oto2[i].onclick=function(){

hiaia
hiaia   2016.09.13 23:35

var oto2=oto1.getElementsByTagName('li'); 返回的是类数组对象, 循环里面少了索引 oto2[i];

wxl1555
wxl1555   2016.09.14 00:19

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">



无标题文档 #div0{ width:700px; height:500px; border:3px #000000 solid;} #div1{ width:300px; height:200px; float:left; background-color:#CCCCCC;} #div2{ width:300px; height:200px; float:right; background-color:#F00;} ul,li{ list-style: none; } ul li a{ display: block; background:red; border: 1px solid teal; } window.onload=function(){ var oto1=document.getElementById('div1'); var oto2=oto1.getElementsByTagName('li'); var oto3=document.getElementById('div2'); var ul = document.getElementsByTagName('ul')[0]; ul.onclick = function(e){ //事件委托 var text = e.target.text; //把值赋给div2的innerHTML; oto3.innerHTML = text; // 如果想让值内容累加,执行此代码,把上一行的代码注释掉 // oto3.innerHTML += text + "</br>"; } }




wxl1555
wxl1555   2016.09.14 00:19
 <!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;
   border:3px #000000 solid;}
#div1{
   width:300px;
   height:200px;
   float:left;
   background-color:#CCCCCC;}
#div2{
   width:300px;
   height:200px;
   float:right;
   background-color:#F00;}
   ul,li{
     list-style: none;
   }
   ul li a{
     display: block;
     background:red;
     border: 1px solid teal;
   }

</style>
<script type="text/javascript">
   window.onload=function(){
       var oto1=document.getElementById('div1');
       var oto2=oto1.getElementsByTagName('li');
       var oto3=document.getElementById('div2');
       var ul  = document.getElementsByTagName('ul')[0];

    ul.onclick = function(e){
      //事件委托
    var text = e.target.text;
      //把值赋给div2的innerHTML;
    oto3.innerHTML = text;

    //  如果想让值内容累加,执行此代码,把上一行的代码注释掉
  //  oto3.innerHTML += text + "</br>";
    }

}

</script>
</head>

<body>
<div id="div0">
<div id="div1">
<ul>
 <li><a href="javascript:void(0)">oh my</a></li>
 <li><a href="javascript:void(0)">2</a></li>
 <li><a href="javascript:void(0)">3</a></li>
 <li><a href="javascript:void(0)">4</a></li>
 <li><a href="javascript:void(0)">5</a></li>
</ul>
</div>
<div id="div2"></div>
</div>
</body>
</html>

qq_16877261
qq_16877261   2016.09.14 08:21

我觉得刚开始学一门技术的时候,最应该 选择一本好书来看,边看边练习,因为书本比较系统。如果学习js框架的话,推荐jquery 权威指南

Csdn user default icon
上传中...
上传图片
插入图片