こんにちは! アウラの河野です。 今回は制作中の案件で、タブメニューで表示を切り替える仕様があり、 簡単に作成する方法が見つかりましたので、ご紹介いたします。 まずはマークアップから <div id="contents"> <div class="tab_box"> <ul class="tab_list"> <li>タブ1</li> <li>タブ2</li> <li>タブ3</li> </ul> <ul class="article"> <li>ダミーテキスト1</li> <li>ダミーテキスト2</li> <li>ダミーテキスト3</li> </ul> </div> </div>
![vue.jsを使ってタブメニューをサクッと実装してみた。](https://cdn-ak-scissors.b.st-hatena.com/image/square/a7b5ca7c11b6de4945c2503a5ab03cd13d1d8af3/height=288;version=1;width=512/https%3A%2F%2Fwww.aura-office.co.jp%2Fwp-content%2Fuploads%2F2019%2F05%2F2019052201.png)