在这里,我试图打开并获取一个div的内容到目标div点击一个href.在这里,我有一个表,我有hrefs有div ID的链接,我有一个目标div是空的.
当我点击href链接时,链接的div内容应该在目标div中打开.
对于ex:对于链接fea1我已经链接了id #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;
}
paw*_*wel 22
您可以将所有#m1... #m9div放入.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;
}
据我所知,这不可能只用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解决方案
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>| 归档时间： |
|
| 查看次数： |
136003 次 |
| 最近记录： |