0

私は次のことを行う方法を理解するのに本当に苦労しています：

2 つのタブ (横に並んでいる) が必要です。1 つは検索用 (およびそのようにラベルが付けられています) で、もう 1 つは投稿用 (そのようにラベルが付けられています) です。検索タブが選択されたときに検索ボックスが表示され、投稿タブが選択されたときに別の検索ボックスが表示されます。検索ボックスを非表示にしたくありません。基本的には CSS を使用したタブ ナビゲーションだと思いますが、それを機能させる方法を一生理解することはできません。

これは私がこれまでに持っているhtmlです（私はこれに慣れていないので、どんなアドバイスも素晴らしいでしょう）

<div id="navigation">
  <ul class="nav"> 
   <li class="first-selected"><a href="">Search</a></li>
   <div class="search">
    <p><form method="post" action="twocents.html">
    <label for="Search"></label>
    <input type="text" name="Search" id="Search"/>
    <input type="submit" value="Search"/></p>
</div>

<li class="second-selected"><a href="">Post</a></li> 
<div class="post"> 
 <p><form method="post" action="twocents.html">
 <label for="Search"></label>
 <input type="text" name="Post" id="Post"/>
 <input type="submit" value="Post"/></p>
</div>
</ul>
</div>
4

4 に答える 4

0

以前の投稿で申し訳ありません。Danield のタブ付きビューを少し変更し、スケーラブルで信頼性の高いものにしました。

ありがとうダニエルド。

    li {
                display: inline-block;
                margin-right: 10px;
                list-style: none;
            }

            .frame {
                display: none;
            }

                .frame:target {
                    display: block;
                }





    /// Markup


    <div id="navigation">
            <ul class="nav">
                <li><a href="#tab1">Tab1</a></li>
                <li><a href="#tab2">Tab2</a></li>
                <li><a href="#tab3">Tab3</a></li>
                <li><a href="#tab4">Tab4</a></li>
            </ul>
        </div>

            <div id="tab1" class="frame">
                <p>
                    Tab 1
                </p>
            </div>

            <div id="tab2" class="frame">
                <p>
                    Tab 2
                </p>
            </div>

            <div id="tab3" class="frame">
                <p>
                    Tab 3
                </p>
            </div>

            <div id="tab4" class="frame">
                <p>
                    Tab 4
                </p>
            </div>
于 2013-10-05T22:05:59.100 に答える