如何链接到标题，并在JavaScript中单击链接时导致点击事件触发？ [英] How do I link to a heading and cause a click event to fire when the link is clicked in JavaScript?
问题描述
我有一堆链接在我的页脚，我想链接到不同的标题在一个页面上，创建一个点击事件，因此相关的段落从 display：none 到 display：block 。
I have a bunch of links in my footer and I want to link to different headings on a page and create a click event so a associated paragraph changes from display: none to display: block.
换句话说：你看到标题和一个带有链接的页脚。你点击页脚链接，屏幕应该跳转到（链接到）相关的h2，并显示以前隐藏和关联的p。
Put another way: You see headings and a footer with links (like the demo). You click the footer links and the screen should jump to (link to) an associated h2 and display a previously hidden and associated p.
这里是我有：当我直接点击标题（从stackoverflow帖子改编）显示段落。当我点击页脚中的链接时，我可以链接到标题。但是，当我点击页脚链接时，我需要显示相关的段落并链接到标题（两者）。
Here is what I have: I can display the paragraphs when I click on the headings directly (adapted from a stackoverflow post). I can link to the headings when I click on the links in the footer. But I need to display the associated paragraph and link to a heading (both) when I click the footer links.
以下是我的标记：
<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中的解决方案。 / p>
I need the solution in vanilla 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中单击链接时导致点击事件触发？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
