在JavaScript中单击链接时，如何链接到标题并引发单击事件？
我的页脚中有一堆链接，我想链接到页面上的不同标题，并创建一个单击事件，以便相关段落从在JavaScript中单击链接时，如何链接到标题并引发单击事件？,javascript,html,css,Javascript,Html,Css,我的页脚中有一堆链接，我想链接到页面上的不同标题，并创建一个单击事件，以便相关段落从display:none更改为display:block 换句话说：你会看到标题和带有链接的页脚（就像演示一样）。单击页脚链接，屏幕应跳转到（链接到）关联的h2，并显示以前隐藏和关联的p 以下是我所拥有的：当我直接点击标题（改编自stackoverflow帖子）时，我可以显示段落。当我点击页脚中的链接时，我可以链接到标题。但是，当我单击页脚链接时，我需要显示相关的段落和指向标题的链接（两者） 以下是我到目前为止的
display:nonedisplay:block<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>
var services=document.getElementsByClassName（'service'），
servicedesc；
对于（var i=0；ivar useQuerySelector=false；
//来自jscheuer1的垫片--http://www.dynamicdrive.com/forums/showthread.php?68847-为什么getelementsbyclassname不工作
如果（！document.getElementsByClassName）
{
document.getElementsByClassName=函数（cn）
{
var rx=new RegExp（“（？：^ |\\s）”+cn+”（？：$|\\s）”；
var allT=document.getElementsByTagName（“*”），allCN=[]，ac=“”，i=0，a；
而（a=allT[i=i+1]）
{
ac=a.className；
if（ac&&ac.indexOf（cn）！=-1）
{
如果（ac==cn）
{
allCN[allCN.length]=a；继续；
}
接收测试（ac）？（所有CN[所有CN.长度]=a）：0；
}
}
返回allCN；
}
}
//我自己的特色“嗅探”
尝试
{
document.getElementByClassName（“”）；
}
捕获（ex）
{
useQuerySelector=true；
}
功能导航锚（anchorObject）
{
var anchorName=anchorObject.href.substring（anchorObject.href.lastIndexOf（“#”）+1，anchorObject.href.length）
var tagObj=document.getElementById（anchorName）；
var hiddenElements=（！useQuerySelector？tagObj.parentElement.getElementsByClassName（“p-hide”）：tagObj.parentElement.querySelectorAll（“.p-hide”）；
切换元素（hiddenElements，false）；
}
功能切换元素（隐藏元素，bHide）
{
var objcurrent=null；
对于（i=0；i功能切换元素（隐藏元素，bHide）
{
var objcurrent=null；
对于（i=0；i
<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>
内特纳夫
.隐藏类{
显示：无；
}
服务1
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX
服务2
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX
-
-
-
功能切换（链接）{
target=link.getAttribute（“d
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');
}
});
}
var useQuerySelector = false;
//Shim from jscheuer1 -- http://www.dynamicdrive.com/forums/showthread.php?68847-Why-getelementsbyclassname-not-working-IE
if (!document.getElementsByClassName)
{
document.getElementsByClassName = function (cn)
{
var rx = new RegExp("(?:^|\\s)" + cn+ "(?:$|\\s)");
var allT = document.getElementsByTagName("*"), allCN = [],ac="", i = 0, a;
while (a = allT[i=i+1])
{
ac=a.className;
if ( ac && ac.indexOf(cn) !==-1)
{
if(ac===cn)
{
allCN[allCN.length] = a; continue;
}
rx.test(ac) ? (allCN[allCN.length] = a) : 0;
}
}
return allCN;
}
}
//My own feature "sniffing"
try
{
document.getElementByClassName('');
}
catch(ex)
{
useQuerySelector = true;
}
function navigateToAnchor(anchorObject)
{
var anchorName = anchorObject.href.substring(anchorObject.href.lastIndexOf("#")+1, anchorObject.href.length)
var tagObj = document.getElementById(anchorName);
var hiddenElements = (!useQuerySelector?tagObj.parentElement.getElementsByClassName("p-hide"):tagObj.parentElement.querySelectorAll(".p-hide"));
toggleElements(hiddenElements, false);
}
function toggleElements(hiddenElements, bHide)
{
var objCurrElement = null;
for (i = 0; i < hiddenElements.length; i++)
{
objCurrElement = hiddenElements[i];
if (objCurrElement != null && objCurrElement != 'undefined')
{
if (bHide)
{
//Add the p-hide class.
objCurrElement.className += "p-hide";
}
else
{
//Remove the p-hide class.
objCurrElement.className = objCurrElement.className.replace(/p\-hide/,'');
}
}
}
}
function toggleElements(hiddenElements, bHide)
{
var objCurrElement = null;
for (i = 0; i < hiddenElements.length; i++)
{
objCurrElement = hiddenElements[i];
tmpObj = objCurrElement;
if (objCurrElement != null && objCurrElement != 'undefined')
{
if (bHide)
{
//Add the p-hide class.
objCurrElement.classList.add("p-hide");
}
else
{
//Remove the p-hide class.
objCurrElement.classList.remove("p-hide");
}
}
}
}
<li><a href="#service1" onclick="return navigateToAnchor(this);">Service 1</a></li>
<li><a href="#service2" onclick="return navigateToAnchor(this);">Service 2</a></li>
<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>
var target, sericeDiv, pToDisplay
function toggle(link) {
target = link.getAttribute("data-toggle");
sericeDiv = document.getElementById(target)
pToDisplay = sericeDiv.getElementsByTagName('p')[0]
pToDisplay.className = "p-on-white service-desc"
document.getElementById(target).className = "service-desc";
}