1

css を使用して Google Chrome のタブの動作をどのように再現しますか?

私が抱えている問題の1つは、閉じるボタン（x）にあります

大まかなGoogle検索では、アンカー内にボタンを配置するべきではないと書かれていますが、その場合、動作を再現する方法がわかりません.

何か案は？

4

2 に答える 2

1

あなたの質問には2つの別々の答えが必要だと仮定します:

  • 要素を適切にネストするにはどうすればよいですか?
  • 閉じるアクションをどのように実行しますか?

要素のネストから始めましょう。タブを aulに作成し、各タブliをそのリスト内に作成することにしました。閉じるボタンは の中でa右に浮いているタグです。li

<ul>
    <li>Tab 1 <a>x</a></li>
    <li>Tab 2 <a>x</a></li>
    <li>Tab 3 <a>x</a></li>
    <li>Tab 4 <a>x</a></li>
    <li>Tab 5 <a>x</a></li>
</ul>

(実行しようとしていることに適切なすべてのクラスを提供することを強くお勧めしますが、この場合は最小限のコードを使用して、クリーンで読みやすい状態に保ちました。)

次に、JavaScript を使用して閉じるアクションを実行します。

これらの両方の点を示すために、次の jsFiddle を作成することができました。

オリジナルjsFiddle

編集: 改訂された jsFiddle

基本的に、コードは次のように機能します。

$('a').click(function() {
    $(this).closest('li').animate({padding:0, margin:0, width: 0}, function () {  
        $(this).closest('li').hide();   
    });
});

タグをクリックするaと、これは私が作成した x ボタン (クロム タブに似ています) であり、パディング、マージン、および幅を 0 に変更することによって、リスト項目 (タブのリスト、左にフロート) をアニメーション化します。 .

技術的には、ボックスのサイズ設定のために li を border-box に設定したので、animate 関数で padding:0 を使用する必要はまったくありません。

アニメーションが完成したら、リスト項目を完全に非表示にします。（削除したい場合は、その時点で完全に削除することもできますが、私が何をしているのかを見てもらいたかったのです。）

いくつかの追加の要点:

  • ajQuery のほぼすべてのアイテムでクリック イベントを発生させることができますが、特定のモバイル デバイスでは、タグがないと扱いにくくなります。
  • アンカー タグ内にボタンを配置しないことは正しいですが、2 つのアンカー タグ、またはボタンとアンカー タグを 1 つのリスト項目に配置することは問題ありません。

アクティブなタブを設定したり、% を最大幅として使用したりするなど、その他のことはすべて明らかですが、さらにヘルプや説明が必要な場合はお知らせください。

于 2013-01-23T22:34:43.630 に答える
1

これは、JavaScript コードを使用せず、css のみを使用する 1 つのソリューションです。が最善の解決策かどうかはわかりませんが、この種のものが存在することを知るのは確かに楽しいです.

これがJsフィドルです

HTML: (<li>整理に最適だと思われるものを使用する必要があります)

<div class="background" id="background">
    <i class="icon-home"></i>
    <div class="text">Tab name 
        <div class="close-button">
            <a href="#background" >x</a>
        </div>
    </div>
</div>

そしてCSSマジック：

@import url('http://twitter.github.com/bootstrap/assets/css/bootstrap.css');

#background{ background-color:#d8d8d7; 高さ:30px; 不透明度:1; 表示:テーブルセル; 垂直整列:中央; トランジション: 不透明度 .5s; -moz-transition: 不透明度 .5s; /* Firefox 4 / -webkit-transition: opacity .5s; / Safari および Chrome / -o-transition: 不透明度 .5s; /オペラ */ }

#background:target{ 不透明度:0; }

.text{ 表示:インラインブロック; }

.close-button{ text-align:center; 幅:20px; 高さ:20px; 表示:インラインブロック; -webkit-border-radius: 50%; -moz-border-radius: 50%; 境界半径: 50%; }

.close-button:hover{ background-color:#ec8e92; }

.close-button:active{ background-color:#cc7d80; }

.close-button a{ text-decoration:none; 色:#868687; }

.close-button a:hover{ color:#FFFFFF; }

それが役に立てば幸いです。または、少なくとも CSS の視野を広げてください。

乾杯。

于 2013-01-23T23:18:21.717 に答える