Question

我对以下代码有疑问，想象其余的都没问题（html，head，body等）我想要做的是，当你点击其中一个按钮隐藏文本/图像显示或隐藏时，代码就可以了。问题是当你点击按钮时，我也希望它带你到新出现的部分的锚点，我似乎无法做到这一点。

这是HTML上的代码

<h2 class="especial">TITLE</h2> 
<p class="normal"><input type=image src="images/img_beta/buttonimage1.png" onclick="show_section1();">Section1</p>
<p class="normal"><input type=image src="images/img_beta/buttonimage2.png" onclick="show_section2();">Section2</p>  
<hr>
<div id="Section1" style="display:none">
<a id="Section1_anchor"><h2 class="especial">Sect1TittleHere</h2></a>
    <p class="interior">Blablah this is the content of section1</p> 

</div>
<div id="Section2" style="display:none"> 
<a id="Section2_anchor"><h2 class="especial">Sect2TittleHere</h2></a>
    <p class="interior">Blablah content of section2</p>
    </div>

这是控制onclick事件的JS函数，每个部分都有一个，但它们都是一样的。

<script language='javascript'>
//Variables
var sect1_guardian=0, sect2_guardian=0, sect3_guardian=0;       
function show_sect1(){
    if (sect1_guardian == 0) {          document.getElementById("Section1").style.display="block";
        sect1_guardian=1;
        //Close the other sections if opened
        document.getElementById("Section2").style.display="none";
        document.getElementById("Section3").style.display="none";
        //Reset guardians
        sect2_guardian=0;
        sect3_guardian=0;           
    }
    else {
        document.getElementById("Section1").style.display="none";
        sect1_guardian=0;
    }
}

我应该在何处以及如何将链接添加到锚点？如果我尝试将其添加到按钮标记和onclick事件。我做这样的事情

<p class="normal"><a href="#Section1_anchor"><input type=image src="images/img_beta/buttonimage1.png" onclick="show_section1();"></a>Section1</p>

因为onclick事件在图像中，我不希望文本被hiperlinked。很明显，我正在失去某些东西/做错事，可能是一个羞辱性的错误，但我要求提出建议和更正。

Answer 1

如果它完全是代码的复制粘贴，那么onclick处理程序将被称为＆＃39; show_section1（）＆＃39;并且该函数被称为＆＃39; show_sect1（）＆＃39;。注意sect！= section :)。

我们应该进一步观察吗？

Answer 2

你可以拥有你建议的HTML，并做这样的事情：

window.location = document.getElementById("Section1").parentNode.href;

将“Section1”替换为您的特定部分。

Answer 3

好吧，我找到了一个解决方案，它更容易，可能没人说，因为我以错误的方式提出问题，但也许这会对某人有所帮助。

我想让按钮带你到文档中的锚点，对吗？

上面的代码工作得很好，你点击按钮，它显示隐藏的文字，或隐藏它。

现在，将以下内容添加到按钮代码中，它也可以执行锚定。

<p class="normal"><a href="#Section1"><input type=image src="images/img_beta/buttonimage1.png" onclick="show_section1();"></a>Section1</p>

我刚刚添加了一个标签来链接按钮，并使用HTML id（我已经用于JS）作为锚点。我希望能够清楚地解释它，并且它对某人有帮助！

Key是，使用html id作为锚点

JS-在onclick（）事件中链接到文档内的锚点

3 个答案: