0

私の質問は、JavaScript を使用せずに HTML フォームで展開可能なパネルを作成して、ユーザーが各パネルをクリックするとフォームが展開されて表示されるようにする方法です。

クリック前:

<ul>
    <li id="panel1"><a></a><div class="content"></div></li>
    <li id="panel2"><a></a><div class="content"></div></li>
    <li id="panel3"><a></a><div class="content"></div></li>
</ul>

クリック後:

<ul>
    <li id="panel1">
      <a></a>
        <div class="content">
            <form id="FORM"> ..... </form>
        </div>
    </li>
    <li id="panel2"><a></a><div class="content"></div></li>
    <li id="panel3"><a></a><div class="content"></div></li>
</ul>
4

3 に答える 3

0

JavaScriptをまったく使用しないと、使用できません。

リンクを配置して、毎回拡張コンテンツのあるページにユーザーをリダイレクトしない限り。

または、クリックイベントではなく：hover疑似セレクターを使用して、ある種の複雑なCSSを記述しない限り。

于 2013-01-14T23:52:05.180 に答える
0

:target css 疑似セレクターを使用してこれを行うことができますが、アンカー タグをクリックすると URL が変更されるため、フォームを切り替えるのが難しいため、あまりエレガントではありません。JavaScript を使用することをお勧めします。

        <style>
        form {
            display: none;
        }
        form:target {
                display: block;
                background: red;
            }
        </style>
        <ul>
<li id="panel1" ><div class="content"><a href="#form">Show form</a><form id="form" > My form <input type="text"></form></div></li>
<li id="panel2"><div class="content">My content</div></li>
<li id="panel3"><div class="content">My content</div></li>
</ul>

:target の動作例: http://css-tricks.com/css-target-for-off-screen-designs/およびhttp://css-tricks.com/on-target/

于 2013-01-15T00:05:25.873 に答える
0

CSS 3 には、:target役立つ疑似セレクターがあります。以下に例を示します: https://tinker.io/1756b

于 2013-01-15T00:05:40.507 に答える