logo标签列表

如何将href定位到div元素。

htmlcss
19

在这里，我试图通过点击一个链接（a href）来打开并获取一个 div 元素中的内容，并将其放入目标 div 中。

我有一个包含多个链接的表格，这些链接指向不同的 div 元素的 id，同时我也有一个空的目标 div。

当我单击链接时，应该打开链接的 div 内容并在目标 div 中显示。

例如： 对于链接 fea1，我已经将其与 #m1 的id相连。当我单击 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;
}
7
你的 JavaScript 代码在哪里？ - Deepak Ingole
@Pilot，我没有使用JavaScript代码来完成这个。 - CJAY
哦，那你是怎么做到的呢？ - Deepak Ingole
2
你必须将内容从一个div移动到另一个div吗？根据哈希和相应的ID显示/隐藏div会产生相同的视觉效果，就像这样：http://jsfiddle.net/hn3U7/ - pawel
哦，你移除了 JavaScript 标签。这是否意味着你想找到一种 不使用 JavaScript 的解决方案？ - Felix Kling
显示剩余9条评论
7个回答
23
你可以将所有的 #m1...#m9 div 放入 .target 中，并使用 :target 伪类基于片段标识符（哈希）显示它们。这不会移动 div 之间的内容，但我认为效果接近你想要实现的效果。

示例

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;
}
2
你应该提到:target在IE8及以下版本中不受支持。否则，干得好！ - Felix Kling
如何在Bootstrap中实现相同的功能？ - Sanket Deshpande
6
据我所知，仅使用CSS是不可能实现的。以下是一种使用JavaScript库jQuery来解决此问题的解决方案。更多关于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解决方案。

var target = document.querySelector('.target');
[...document.querySelectorAll('table a')].forEach(function(element){
    element.addEventListener('click', function(){
        target.innerHTML = document.querySelector(element.getAttribute('href')).innerHTML;
    });
});
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;
}
<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>

1
jQuery没有被标记为这个问题。 - Rahul Desai
@RahulDesai，你说得对！但问题中他写道“我该怎么做？”这是一个回答，展示了他如何做到这一点... - caramba
最好至少向OP表明您有一个基于jQuery的解决方案等等... - Kristof Feys
当您使用jQuery时，您的网站会变得更沉重多少？ - Rodrigo
241.59 KB 未压缩或 27.85 KB 经过最小化和 zopflination 压缩。我不知道你在哪里看到这么小的数字。英文中的逗号表示千位分隔符，而不是小数点。 - Rodrigo
3

将div命名与href目标相同。

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

请指定您想要定位的 div 元素。这似乎不是一个完整的句子。请编辑并澄清您的回答。 - Felix Kling
啊，这实际上是不必要的，因为在这种情况下id属性和name属性具有相同的效果。 - Felix Kling
1
一种简单的方法就是像这样做：

<a href="demo.html#divid">Demo</a>
0
如果你使用angularjs，你只需要写正确的CSS来给你的div加上边框。HTML代码如下：
<div 
style="height:51px;width:111px;margin-left:203px;" 
ng-click="nextDetail()">
</div>


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

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

尝试在jQuery中使用这段代码

$(document).ready(function(){
  $("a").click(function(){
  var id=$(this).attr('href');
  var value=$(id).text();
  $(".target").text(value);
  });
});
$是什么？它不是标准的JavaScript函数。 - Felix Kling
使用 jQuery 获取结果。 - abinaya
啊，如果一个问题没有标记为jQuery，你就不应该提供一个jQuery的答案。或者至少你也应该提供一个非jQuery的解决方案。 - Felix Kling
0

我没有试过，但是这可能会有所帮助。

$(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;
});

});

});

});

$是什么？它不是标准的JavaScript函数。另外，你的代码真的很难读懂。你至少可以适当地缩进它。 - Felix Kling
用于 jQuery 中的选择。 - curositykiller
那么你至少应该“提到”你正在使用jQuery。但是，如果一个问题没有被标记为jQuery，你就不应该提供一个jQuery的答案。 - Felix Kling
网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接