Html 如何将 href 定位到 div
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/21328055/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
How to target the href to div
提问by CJAY
Here i am trying to open and get the contents of one div to target div on-click on a href. Here i have table where i have hrefs which has the link to div ids, and i have an target div which is empty.
在这里，我试图打开并获取一个 div 的内容，以通过点击一个 href 来定位 div。在这里，我有一个表，其中包含指向 div id 的链接的 hrefs，并且我有一个空的目标 div。
when i click the href links, the linked div contents should open in the target div.
当我单击 href 链接时，链接的 div 内容应该在目标 div 中打开。
for ex:
for link fea1i have linked id #m1, when i click the fea1, the #m1contents should appear in target div.
例如：对于fea1我已链接 id 的链接#m1，当我单击 时fea1，#m1内容应出现在目标 div 中。
How can i do this???
我怎样才能做到这一点？？？
here is my code:
这是我的代码：
HTML:
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:
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;
}
回答by pawel
You can put all your #m1...#m9divs into .targetand display them based on fragment identifier (hash) using :targetpseudo-class. It doesn't move the contents between divs, but I think the effect is close to what you wanted to achieve.
您可以将所有#m1... #m9div 放入.target并使用:target伪类基于片段标识符（哈希）显示它们。它不会在 div 之间移动内容，但我认为效果接近您想要达到的效果。
HTML
HTML
<div class="target">
<div id="m1">
dasdasdasd m1
</div>
<!-- etc... -->
<div id="m9">
dasdasdsgaswa m9
</div>
</div>
CSS
CSS
.target {
width:50%;
height:200px;
border:solid black 1px;
}
.target > div {
display:none;
}
.target > div:target{
display:block;
}
回答by caramba
From what I know this will not be possible only with css. Heres a solution how you could make it work with jQuery which is a javascript Library. More about jquery here: http://jquery.com/
据我所知，这仅使用 css 是不可能的。这是一个解决方案，如何让它与 jQuery 一起工作，jQuery 是一个 javascript 库。更多关于 jquery 的信息：http: //jquery.com/
Here is a working example : http://jsfiddle.net/uyDbL/
这是一个工作示例：http: //jsfiddle.net/uyDbL/
$(document).ready(function(){
$('a').on('click',function(){
var aID = $(this).attr('href');
var elem = $(''+aID).html();
$('.target').html(elem);
});
});
Update 2018(as this still gets upvoted) here is a plain javascript solution without jQuery
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>回答by Pixel Time
Put for div same name as in href target.
为 div 设置与 href 目标相同的名称。
ex: <div name="link">and <a href="#link">
例如：<div name="link">和<a href="#link">
回答by abinaya
Try this code in jquery
在 jquery 中试试这个代码
$(document).ready(function(){
$("a").click(function(){
var id=$(this).attr('href');
var value=$(id).text();
$(".target").text(value);
});
});
回答by curositykiller
havent tried but this might help
还没有尝试过，但这可能会有所帮助
$(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;
});
});
});
});
});
回答by BERGUIGA Mohamed Amine
if you use
如果你使用
angularjs
angularjs
you have just to write the right css in order to frame you div
html code
您只需编写正确的 css 即可构建 div
html 代码
<div
style="height:51px;width:111px;margin-left:203px;"
ng-click="nextDetail()">
</div>
JS Code(in your controller):
JS 代码（在您的控制器中）：
$scope.nextDetail = function()
{
....
}
回答by Ashish Ashturkar
easy way to do that is like
这样做的简单方法就像
<a href="demo.html#divid">Demo</a>
