Question

当我点击一个按钮时，我想重定向到一个页面。问题是......如果我使用正常的sintax，按钮工作正常，但是如果我通过使用＃和。（类）来应用一些css，那么按钮它不再工作了？！如何同时保留我的CSS和功能？！这是我的代码：

<body>

    <input id="buttonrain" class="classname" type="button" onClick="window.location.href='rain.html'" value="Rain" />

    <!--or <a href="rain.html" id="buttonrain" class="classname">Rain</a> still not working-->

</body>

CSS FILE

html {
min-width: 100%;
min-height: 100%;
}
body{
width: 1024px;
height:600px;
background:white;
margin:0px;
padding:0px 0px;
display:block;
overflow:hidden;
}

.classname {
-moz-box-shadow:inset 0px 1px 0px 0px #ffffff;
-webkit-box-shadow:inset 0px 1px 0px 0px #ffffff;
box-shadow:inset 0px 1px 0px 0px #ffffff;
background:-webkit-gradient( linear, left top, left bottom, color-stop(0.05,  #f0ea3c), color-stop(1, #dfdfdf) );
background:-moz-linear-gradient( center top, #f0ea3c 5%, #dfdfdf 100% );
filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#f0ea3c', endColorstr='#dfdfdf');
background-color:#f0ea3c;
-moz-border-radius:6px;
-webkit-border-radius:6px;
border-radius:6px;
border:1px solid #dcdcdc;
display:inline-block;
color:#0f000f;
font-family:Verdana;
font-size:15px;
font-weight:bold;
padding:18px 9px;
text-decoration:none;
text-shadow:1px 1px 0px #ffffff;
position:relative;
bottom:250px;

}.classname:active {
position:relative;
top:1px;
}

#buttonrain{
left:80px;
}

Answer 1

您可以尝试的方法是使用这样的表格：

<form action='http://www.page.com/index.html' method='post'>
<input type='submit' name='button' value='Go!'>
</form>

我是这个网站的新手，所以请原谅我发布的技能不足：）

Answer 2

观察：

.classname {
position:relative;
bottom:250px;

}

.classname:active {
position:relative;
top:1px;
}

我已从您提供的代码中提取此内容。当我测试这个时，我注意到当我单击鼠标按钮时按钮移开了。这使得我好像没有点击按钮。当我释放鼠标时，HTML按钮返回，但它不会收到onClick事件。当我删除那个疯狂的定位变化时，它工作得很好。试试吧。

Answer 3

我删除了下面的代码，（。active problem property）并且工作正常（感谢musicin3d）

.classname:active {
   position:relative;
   top:1px;
}

如何使用html中的按钮标记重定向到页面？

3 个答案: