1

ボタンをクリックすると、ページにリダイレクトされます。問題は...通常のシンタックスを使用するとボタンは正常に機能しますが、 # と .(classes) を使用して id に 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;
}
4

3 に答える 3

1

観察：

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

}

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

私はあなたが提供したコードからこれを引き出しました。これをテストしたとき、マウスボタンをクリックしたときにボタンが邪魔にならないように移動したことに気付きました。これにより、ボタンをクリックしなかったかのようになります。マウスを離すとHTMLボタンが返されますが、onClickイベントを受け取りません。そのクレイジーな位置の変更を削除したとき、それはうまく機能しました。それを試してみてください。

于 2012-12-17T02:12:16.797 に答える
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 に答える
0

以下のコード (.active problem プロパティ) を削除しましたが、問題なく動作します (musicin3d のおかげです)。

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