1

当我单击一个按钮时，我想重定向到一个页面。问题是...如果我使用普通的 sintax，按钮可以正常工作，但是如果我通过使用 # 和 .(classes) 将一些 css 应用于 id，则按钮不再工作了？！我怎样才能同时保持我的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;
}
4

3 回答 3

1

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

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

我是这个网站的新手，所以请原谅我缺乏发帖技巧:)

于 2012-12-17T00:17:06.120 回答
1

观察：

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

}

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

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

于 2012-12-17T02:12:16.797 回答
0

我已经删除了下面的代码（.active 问题属性），它工作正常（感谢 musicin3d）

.classname:active {
   position:relative;
   top:1px;
}
于 2012-12-17T18:01:57.507 回答