我的页脚中有一堆链接，我想链接到页面上的不同标题并创建一个点击事件，以便关联的段落从 display: none 更改为 display: block 。
换句话说:您会看到带有链接的标题和页脚(如演示)。您单击页脚链接，屏幕应跳转到(链接到)关联的 h2 并显示之前隐藏的关联 p。
这就是我所拥有的:当我直接单击标题时，我可以显示段落(改编自 stackoverflow 帖子)。当我单击页脚中的链接时，我可以链接到标题。但当我单击页脚链接时，我需要显示关联的段落并链接到标题(两者)。
这是到目前为止我的标记:
<div class="service">
<h2 class="page services"><img class="img-bullet-services" src="websiteDot.png" alt="alt">service1</h2>
<p class="p-on-white service-desc p-hide" id="service1">xxxxxxxxxxxxxxxxxxxxxxxxxxxx</p>
</div>
</br>
<div class="service">
<h2 class="page services"><img class="img-bullet-services" src="websiteDot.png" alt="alt">service2</h2>
<p class="p-on-white service-desc p-hide" id="service2">xxxxxxxxxxxxxxxxxxxxxxxxxxxx</p>
</div>
<div id="col4-footer" class="four-cols-footer four-cols">
<ul>
<li style="list-style: none;">
<h3><a class="a-bold" href="Services.php">Services</a></h3>
</li>
<li><a href="Services.php#services1">service1</a>
</li>
<li><a href="Services.php#service2">seervice2</a>
</li>
</ul>
</div>
CSS:
.p-hide {
display: none;
}
js:
var services = document.getElementsByClassName('service'),
servicedesc;
for (var i = 0; i < services.length; i++) {
services[i].addEventListener("click", function () {
servicedesc = this.getElementsByClassName('service-desc');
for (var j = 0; j < servicedesc.length; j++) {
servicedesc[j].classList.toggle('p-hide');
}
});
}
演示: http://jsfiddle.net/4GgRY/
我需要普通 JavaScript 的解决方案。
最佳答案
希望这有效
<html>
<head>
<title>internav</title>
<style type="text/css">
.hideclass{
display: none;
}
</style>
</head>
<body>
<div class="service" id="div1">
<h2 class="page services"><img class="img-bullet-services" src="websiteDot.png" alt="alt">service1</h2>
<p class="service-desc" id="service1">
xxxxxxxxxxxxxxxxxxxxxxxxxxxx<br>
xxxxxxxxxxxxxxxxxxxxxxxxxxxx<br>
xxxxxxxxxxxxxxxxxxxxxxxxxxxx<br>
</p>
</div>
</br>
<div class="service" id="div2">
<h2 class="page services"><img class="img-bullet-services" src="websiteDot.png" alt="alt">service2</h2>
<p class="service-desc" id="service2">
xxxxxxxxxxxxxxxxxxxxxxxxxxxx<br>
xxxxxxxxxxxxxxxxxxxxxxxxxxxx<br>
xxxxxxxxxxxxxxxxxxxxxxxxxxxx<br>
</p>
</div>
<div id="col4-footer" class="four-cols-footer four-cols">
<ul>
<li style="list-style: none;">
<h3><a class="a-bold" href="Services.php">Services</a></h3>
</li>
<li><a href="#div1" data-toggle="service1" onclick="toggle(this)">service1</a>
</li>
<li><a href="#div2" data-toggle="service2" onclick="toggle(this)">seervice2</a>
</li>
</ul>
</div>
<script type="text/javascript">
function toggle (link) {
target = link.getAttribute("data-toggle");
servides = document.getElementsByClassName('service-desc');//.className += " hideclass";
for (var i = servides.length - 1; i >= 0; i--) {
//servides[i].className -= " hideclass";
servides[i].className = "service-desc hideclass";
};
document.getElementById(target).className = "service-desc";
}
</script>
</body>
</html>
关于javascript - 如何链接到标题并在 JavaScript 中单击链接时触发单击事件？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/24025470/