jQuery

【jQuery】シンプルなjQueryタブプラグインmari tabs

September 18, 2018
mari-tabs

mari tabsはシンプルなタブjQueryプラグイン。

Installation

Include js

<script src="mari-tabs.js"></script>

Set HTML

<div class="tab-wrap">
   <ul class="tabs-nav">
      <li class="active">
         Tab 1
      </li>
      <li>
         Tab 2
      </li>
      <li>
         Tab 3
      </li>
   </ul>

   <ul class="tabs-content">
      <li class="active-content">
         Content 1
      </li>
      <li>
         Content 2
      </li>
      <li>
         Content 3
      </li>
   </ul>
</div>

Call the plugin

<script type="text/javascript">
    $(document).ready(function() {
       $('.mari-tabs-content').mariTabs({
              nav: '.tabs-nav'
          });
    });
</script>

In result

<html>
  <head>
  <title>Tabs</title>
  </head>
  <body>

  <div class="tab-wrap">
       <ul class="tabs-nav">
          <li class="active">
             Tab 1
          </li>
          <li>
             Tab 2
          </li>
          <li>
             Tab 3
          </li>
       </ul>

       <ul class="tabs-content">
          <li class="active-content">
             Content 1
          </li>
          <li>
             Content 2
          </li>
          <li>
             Content 3
          </li>
       </ul>
    </div>

  <script src="mari-tabs.js"></script>

  <script type="text/javascript">
     $(document).ready(function() {
              $('.mari-tabs-content').mariTabs({
                     nav: '.tabs-nav'
              });
      });
  </script>

  </body>
</html>

Data Attribute Settings

Example:

<div data-mari-tabs='{"nav": ".tabs-nav"}'></div>

Browser support

  1. Chrome
  2. Firefox
  3. Opera
  4. IE10/11