0

私は html と jquery を使用してサンプルに取り組んでいますが、最初は小さな配置の問題に直面しており、チェックボックスをクリックすると完全に配置されています。スナップショットをご覧ください。

最初の画像

最初の画像

チェックボックスをクリックした後のイメージ

ここに画像の説明を入力

ここに私のhtmlファイルがあります

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
<link rel="stylesheet" type="text/css" href="signin.css">
<title>First sample</title>
 <script
src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js">

</script>
<script type="text/javascript">
$(document).ready(function() {
    $("#check1").click(function() {

        $("#passwordRowId").toggle();
        $("#genderRowId").toggle();

    });
});
</script>


</head>
<body>


<table bgcolor="#FFFFFF" align="center">

    <tr id="checkboxRowId">
        <td colspan="2" align="center"><input type="checkbox"
            id="check1" />check1</td>
    </tr>
    <tr id="userNameRowId">
        <td>UserName :</td>
        <td><input type="text" name="username"></td>
    </tr>
    <tr id="passwordRowId">
        <td>Password :</td>
        <td><input type="password" name="password"></td>
    </tr>





    <tr id="genderRowId">
        <td>Select Gender :</td>
        <td><select name="gender">
                <option>male</option>
                <option>female</option>
        </select></td>
    </tr>

    <tr>
        <td colspan="2" align="center"><input id="signIn" type="button"
            value="Sign In"></td>
    </tr>
</table>

リンクされたcssファイルは

@CHARSET "ISO-8859-1";

#passwordRowId {
display: block;
}

#genderRowId {
display: none;
}

だから今私の質問は、最初のレイアウトを適切に配置する方法です。前もって感謝します

4

2 に答える 2

2

display: block簡単な答えは、テーブル要素には使用しないことです。

表示されているcssをすべて削除すると正常に動作します

デモ: http://jsfiddle.net/67usZ/

于 2012-12-23T18:51:19.073 に答える
1

ここで非表示にするために CSS を使用しないでください。ページの準備ができたら、性別の行を非表示にするだけです。

$(document).ready(function() {
    $("#genderRowId").toggle();
    $("#check1").click(function() {

        $("#passwordRowId").toggle();
        $("#genderRowId").toggle();

    });
});
于 2012-12-23T19:01:14.980 に答える