vue.jsを使ってタブメニューをサクッと実装してみた。

ブログ

Blog
  1. ホームページ制作・運営はアウラ:ホーム
  2. ブログ
  3. vue.jsを使ってタブメニューをサクッと実装してみた。

vue.jsを使ってタブメニューをサクッと実装してみた。

vue.jsを使ってタブメニューをサクッと実装してみた。

こんにちは!
アウラの河野です。

今回は制作中の案件で、タブメニューで表示を切り替える仕様があり、
簡単に作成する方法が見つかりましたので、ご紹介いたします。

まずはマークアップから

ざっと、適当なマークアップとなっていますが。
上の「tab_list」とクラス名があるのが、メニューボタン箇所。
下の「article」と書かれているのが、メニューのボタンごとに切り替わりたいコンテンツとなります。

次はCSSで装飾!

ここで肝となるのが、
ボタンと連動して、本文に「active」というクラスが付与されればOK。
「active」がついていなければ、表示を消すという仕組みです。

で、最後にvue.jsで記載すれば完了です!

記述はたったこれだけ!

次はマークアップを少しカスタマイズしていきます。

v-on:clickで、変更したものに「active」というクラスの受け渡しを行い、
動的に本文の表示・非表示を切替ています。

少ないコードで、軽量に実装できるので、とても便利でした!

サンプルはこちら

See the Pen
xNpKXj
by 河野励 (@aura_kouno)
on CodePen.

前後の記事

ブログセミナー(SEOセミナーのおまけつき)を実施するためお客様の会社に行ってきました。in阪神ネジ株式会社

こんにちは。 長い長いGWも終わり、仕事の感覚がようやく戻り始めたところの横山です。 さて、アウラでは「御社のWeb事業部です。」をコンセプトに掲げて日々の業務にあたっております。 それってどういう意…

お電話でのお問い合わせはこちら:06-6292-8577。受付時間は平日9:30~18:30 インターネットからは24時間受付中!お問い合わせフォームはこちら