jQuery
【jQuery】jQueryを使用したタブプラグインjtabs
April 12, 2017

jtabsはjQueryを使用したタブプラグイン。
<div id="my-tabs" class="jtabs"> <!-- tabs navigation --> <div class="jtabs-nav"> <ul> <li data-name="tab-1">Tab 1</li> <li data-name="tab-2">Tab 2</li> <li data-name="tab-3">Tab 3</li> </ul> </div> <!-- tabs content --> <div class="jtabs-content"> <!-- tab 1 --> <div class="jtab" data-name="tab-1"> <div class="jtab-inner"> Tab 1 Content </div> </div> <!-- tab 2 --> <div class="jtab" data-name="tab-2"> <div class="jtab-inner"> Tab 2 Content </div> </div> <!-- tab 3 --> <div class="jtab" data-name="tab-3"> <div class="jtab-inner"> Tab 3 Content </div> </div> </div> </div> <script src="https://code.jquery.com/jquery-3.2.1.min.js"></script> <script src="../jtabs.js"></script> <script> $('#my-tabs').jtabs(); </script>
MIT
Demo/Download