gpt4 book ai didi

html - 如何将 href 定位到 div

转载 作者:技术小花猫 更新时间:2023-10-29 12:10:13 25 4
gpt4 key购买 nike

在这里,我试图打开并获取一个 div 的内容以在 href 上单击以定位 div。这里我有一个表,其中有 hrefs,它有指向 div id 的链接,我有一个空的目标 div。

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

例如:对于链接 fea1 我有链接 ID #m1,当我点击 fea1 时,#m1 内容应该出现在目标分区中。

我该怎么做???

这是我的代码:

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;
}

最佳答案

你可以将你所有的#m1...#m9 div放入.target中,并根据片段标识符(hash)显示它们使用 :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;
}

关于html - 如何将 href 定位到 div,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/21328055/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com