当我打开html文件但CODEPEN工作时，我的按钮不起作用？

我想知道，当我在我的网页上的按钮做了测试，它在codepen预览& JSFIDDLE上工作，但不是当我打开相同的网页的HTML文件？当我打开html文件但CODEPEN工作时，我的按钮不起作用？

CODEPEN EDITABLE LINK

这工作，如果你下载的代码，并将其导出为.zip文件，当您打开HTML文件，它不会工作。 Codepen editable preview

预览2

下面是上面显示的完全相同的代码的可编辑预览的预览，它工作在可编辑预览但不是在这里预览？这和我在html文件中打开它一样。 preview2 resemblance of how the button doesn't work when I open html file

的jsfiddle VIEW

这里是一个JSFIDDLE of button这就像以上，但在相似的链接它不工作完全相同的代码编辑codepen链接。

我已经重置浏览器，使用不同的浏览器（Safari浏览器，镀铬&火狐）&不同的计算机系统与操作系统（MacOS的&的Windows 10）。

按钮代码的html

<div class="container text-center"> 
 
    <a href="../HTML%20web%20pages/About%20Me.html" target="_parent"><button>Find out more about me</button></a> 
 
</div>

柜面有人说按钮不要因为他们不具有该文件的工作，请更换VLID的联系工作的HTML网页链接&结果将仍然是相同的，它在可编辑的codepen视图jsfiddle上工作，但不是上面的类似链接的preview2。

好像我的H1元素掩盖了我的按钮。

来源

2017-04-20 l.docherty1

检查您的控制台...？ *不安全的JavaScript尝试启动与URL的框架导航“http://stackoverflow.com/questions/43516768/my-button-doesnt-work-when-i-open-the-html-file-but-on-codepen-它工作'来自框架与URL'http://stacksnippets.net/js'。尝试导航顶层窗口的框架是沙盒，但'allow-top-navigation'标志没有设置。* – deceze

@deceze那是因为OP已经设置了'target = _parent'，如果删除了它，它就会工作。 –

@Jones Soo ...你发现了这个问题......？ :) – deceze

这是因为你的<a>元素是<h1>元素的背后，给<a>元以下的款式，那么它应该工作：

a { 
    color: #337ab7; 
    text-decoration: none; 
    position: relative; 
    z-index: 99999; 
}

来源

2017-04-20 10:28:17

它的发生是因为你的H1元素之一是掩盖您的按钮，您可以将z-index设置为您的按钮，但最好将HTML的布局设置为正确的结构。

来源

2017-04-20 10:30:25 Alex

当我打开html文件但CODEPEN工作时，我的按钮不起作用？

回答

相关问题