jQuery

【jQuery】シンプルでレスポンシブのコンテンツスワッパSwitchify-It

June 23, 2017
Switchify-It

Switchify-Itはシンプルでレスポンシブのコンテンツスワッパ

ファイルをリンク

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="js/switchify-it.min.js"></script>
<link href="css/switchify-it.css" rel="stylesheet" />

data-order属性のクラスを持つ要素

<div class="swap-content" data-order="1">Initial content</div>
<div class="swap-content" data-order="2">Content After Button 1 is Clicked</div>
<div class="swap-content" data-order="3">Content After Button 2 is Clicked</div>

<button class="swap-button" data-order="1">Button 1</button>
<button class="swap-button" data-order="2">Button 2</button>
<button class="swap-button" data-order="3">Initial Content</button>

Demo/Download