この記事の例では、ネイティブJSカプセル化vueタブ切り替えの具体的なコードを参考までに共有しています。具体的な内容は次のとおりです。 まずは効果画像をご覧ください使用される技術vue.js、css3 の最新バージョンをダウンロード Vueコンポーネントは直接使用できる <テンプレート> <div class="bookcircle-header"> <ul class="wrapper" :class="headerActive == 0 ? 'friend' : 'booklist'"> <li @click="headerChange(0)" :class="headerActive == 0 ? 'active' : ''"> ブックフレンズ</li> <li @click="headerChange(1)" :class="headerActive == 1 ? 'active' : ''"> 書籍リスト</li> </ul> </div> </テンプレート> <スクリプト> エクスポートデフォルト{ コンポーネント: {}, データ() { 戻る { ヘッダーアクティブ: 0, }; }, 計算: {}, 作成された() {}, マウント() { //送信を初期化します。this.$emit("change", this.headerActive); }, メソッド: { ヘッダー変更(インデックス) { this.headerActive = インデックス; this.$emit("change", インデックス); }, }, }; </スクリプト> <style lang="less" スコープ> .bookcircle-header { 高さ: 42px; ディスプレイ: フレックス; コンテンツの中央揃え: 中央; アイテムの位置を中央揃えにします。 .ラッパー{ 幅: 286ピクセル; フォントサイズ: 14px; 高さ: 29px; 色: #1489fe; 境界線: 1px 実線 #1489fe; 境界線の半径: 14px; ディスプレイ: フレックス; コンテンツの中央揃え: 中央; アイテムの位置を中央揃えにします。 位置: 相対的; box-sizing: border-box; // 境界のオーバーフローを解決し、ボックス内に境界を含める li { フレックス: 1; 高さ: 100%; ディスプレイ: フレックス; コンテンツの中央揃え: 中央; アイテムの位置を中央揃えにします。 zインデックス: 2; } 。アクティブ { 色: 白; } &::前に { コンテンツ: ""; 幅: 143ピクセル; 高さ: 100%; 背景色: #1489fe; 位置: 絶対; 上: 0px; 左: 0px; 境界線の半径: 13px 0px 0px 13px; zインデックス: 1; 遷移: すべて 0.3 秒; } &.firend::before { 変換: translateX(0); 境界線の半径: 13px 0px 0px 13px; } &.booklist::before { 変換: translateX(100%); 境界線の半径: 0px 13px 13px 0px; } } } </スタイル> 実施原則:ul、li、フレキシブル ボックスを使用します。まず、親要素の幅と高さを設定します。次に、フレキシブル ボックスを使用して子要素 li を水平方向に拡張します。子要素 li に flex: 1 を設定すると、子要素は親要素の幅を共有します。 次に、最初の li 要素を絶対配置でカバーする親要素の疑似要素を設定し、z-index 属性を使用して疑似要素と子要素間の階層的な表示関係を制御します。 次に、疑似要素に transition 属性を設定し、transform: translateX(); 属性を使用して要素を水平方向に移動します。 注記: 1. スイッチのクリック イベントは子要素にあり、アクティブ スタイルは子要素に追加されていますが、タブの切り替え効果は子要素ではなく、親要素の疑似要素を通じて実現されます。 以上がこの記事の全内容です。皆様の勉強のお役に立てれば幸いです。また、123WORDPRESS.COM を応援していただければ幸いです。 以下もご興味があるかもしれません:
|
<<: Ubuntu サーバーで MySQL を設定し、リモート接続を実装する方法
>>: VMware Workstationはデバイス/資格情報ガードと互換性がありません
これでtransformコースは終了です。例を見てみましょう。transform transform...
インストール手順 rpm -ivh mysql-コミュニティ-共通-5.7.18-1.el7.x86...
tbody 要素は、thead 要素および tfoot 要素と組み合わせて使用する必要があります...
SMIL は、Web にタイミングとメディアの同期のサポートを追加します。 SMIL は、Web に...
目次序文1. スタイルの浸透1. パターン浸透とは何ですか? 2. 使い方は? 2. ミキシング1....
前面に書かれたNginx は単なるリバース プロキシおよび負荷分散サーバーではなく、電流制限、キャッ...
この記事では、MySQL 8.0.20のインストールと設定方法についての詳細なチュートリアルを参考ま...
序文ご存知のとおり、bash (Bourne-Gain Shell) は、ほとんどの Linux デ...
導入された HTML タグは、必ずしも XHTML 仕様に完全に準拠しているわけではありません。実際...
問題の説明ESXI で Windows にワークステーションをインストールした後、内部の仮想マシンは...
複雑なテーブル構造では、一部のセルが垂直方向に複数のセルにまたがるため、列間属性 COLSPAN を...
問題の説明長い間アカウントパスワードを入力して Zabbix にログインしていないため、管理者パスワ...
解決策:クリック イベントをオーディオ コンポーネントにバインドし、再生メソッドと一時停止メソッドを...
目次ミックスインの実装フック関数のマージプロジェクト実践伸ばす要約するVue は mixins AP...
前回の記事では、MySQL 5.7でルートパスワードを忘れた場合と、MySQL 5.7でルートパスワ...