Question

这里我试图打开并获取一个div的内容以点击一个href上的目标div。在这里，我有一个表格，其中我有hrefs，它有div id的链接，我有一个目标div是空的。

当我点击href链接时，链接的div内容应该在目标div中打开。

代表：对于链接fea1，我已将#m1标记为关联，当我点击fea1时，#m1内容应显示在目标div中。

我该怎么做？

这是我的代码：

HTML：

<!DOCTYPE html>
<html>
  <head>
    <title>
      Example
      </title>
      <link rel="stylesheet" type="text/css" href="css/style.css" />
      </head>
      <body>

        <table border="0">
          <tr>
            <td>
              <hr>
              <a href="#m1">
                fea1
              </a>
              <br>
              <hr>
              <a href="#m2">
                fea2
              </a>
              <br>
              <hr>
              <a href="#m3">
                fea3
              </a>
              <br>
              <hr>
              <a href="#m4">
                fea4
              </a>
              <br>
              <hr>
              <a href="#m5">
                fea5
              </a>
              <br>
              <hr>
              <a href="#m6">
                fea6
              </a>
              <br>
              <hr>
              <a href="#m7">
                fea7
              </a>
              <br>
              <hr>
              <a href="#m8">
                fea8
              </a>
              <br>
              <hr>
              <a href="#m9">
                fea9
              </a>
              <hr>
            </td>
          </tr>
        </table>


        <div class="target">

        </div>


        <div id="m1">
          dasdasdasd
        </div>
        <div id="m2">
          dadasdasdasd
        </div>
        <div id="m3">
          sdasdasds
        </div>
        <div id="m4">
          dasdasdsad
        </div>
        <div id="m5">
          dasdasd
        </div>
        <div id="m6">
          asdasdad
        </div>
        <div id="m7">
          asdasda
        </div>
        <div id="m8">
          dasdasd
        </div>
        <div id="m9">
          dasdasdsgaswa
        </div>        
      </body>
</html>

的CSS：

a{
    text-decoration:none;
    color:black;
}

.target{
    width:50%;
    height:200px;
    border:solid black 1px; 
}

#m1, #m2, #m3, #m4, #m5, #m6, #m7, #m8, #m9{
    display:none;
}

Answer 1

您可以将所有#m1 ... #m9 div放入.target并使用:target伪类基于片段标识符（哈希）显示它们。它不会在div之间移动内容，但我认为效果接近你想要实现的效果。

<强> Fiddle

<强> HTML

<div class="target">
    <div id="m1">
        dasdasdasd m1
    </div>
    <!-- etc... -->
    <div id="m9">
        dasdasdsgaswa m9
    </div>   
</div>

<强> CSS

.target {
    width:50%;
    height:200px;
    border:solid black 1px; 
}
.target > div {
    display:none;
}

.target > div:target{
    display:block;
}

Answer 2

据我所知，这不可能只用css。下面是一个解决方案，你可以使用jQuery这是一个javascript库。有关jquery的更多信息，请访问：http://jquery.com/

以下是一个工作示例：http://jsfiddle.net/uyDbL/

$(document).ready(function(){
    $('a').on('click',function(){
        var aID = $(this).attr('href');
        var elem = $(''+aID).html();

        $('.target').html(elem);
    });
});

更新2018 （因为这仍然得到投票）这里是一个没有jQuery的普通javascript解决方案

＆＃13;

var target = document.querySelector('.target');
[...document.querySelectorAll('table a')].forEach(function(element){
    element.addEventListener('click', function(){
        target.innerHTML = document.querySelector(element.getAttribute('href')).innerHTML;
    });
});

＆＃13;

a{
    text-decoration:none;
    color:black;
}

.target{
    width:50%;
    height:200px;
    border:solid black 1px; 
}

#m1, #m2, #m3, #m4, #m5, #m6, #m7, #m8, #m9{
    display:none;
}

＆＃13;

<table border="0">
<tr>
<td>
<hr>
<a href="#m1">fea1</a><br><hr>
<a href="#m2">fea2</a><br><hr>
<a href="#m3">fea3</a><br><hr>
<a href="#m4">fea4</a><br><hr>
<a href="#m5">fea5</a><br><hr>
<a href="#m6">fea6</a><br><hr>
<a href="#m7">fea7</a><br><hr>
<a href="#m8">fea8</a><br><hr>
<a href="#m9">fea9</a>
<hr>
</td>
</tr>
</table>


<div class="target">

</div>


<div id="m1">dasdasdasd</div>
<div id="m2">dadasdasdasd</div>
<div id="m3">sdasdasds</div>
<div id="m4">dasdasdsad</div>
<div id="m5">dasdasd</div>
<div id="m6">asdasdad</div>
<div id="m7">asdasda</div>
<div id="m8">dasdasd</div>
<div id="m9">dasdasdsgaswa</div>

＆＃13;

Answer 3

将div与href target中的名称相同。

例如：<div name="link">和<a href="#link">

Answer 4

在jquery中尝试此代码

$(document).ready(function(){
  $("a").click(function(){
  var id=$(this).attr('href');
  var value=$(id).text();
  $(".target").text(value);
  });
});

Answer 5

没有尝试，但这可能会有所帮助

$(document).ready(function(){
r=0;s=-1;
$(a).click(function(){
v=$(this).html();
$(a).each(function(){
if($(this).html()==v)
return;
else ++r;
$(div).each(function(){
if(s==r)
$(div).appendTo($(".target")); 
++S;
});

});

});

}）;

Answer 6

如果您使用

angularjs

你只需要编写正确的CSS来构建div html代码

<div 
style="height:51px;width:111px;margin-left:203px;" 
ng-click="nextDetail()">
</div>

JS代码（在您的控制器中）：

$scope.nextDetail = function()
{
....
}

Answer 7

简单的方法就像

<a href="demo.html#divid">Demo</a>

如何将href定位到div

7 个答案: