【jQuery】レスポンシブjQueryモジュールタブTABMODULE

jQuery

TABMODULE

March 19, 2017

TABMODULEはカスタマイズ性の高いレスポンシブjQueryモジュールタブプラグイン。

JS&CSS

  <link rel="stylesheet" type="text/css" href="css/jqueryModuleTab.css" />
  <script src="https://code.jquery.com/jquery-3.1.1.min.js" integrity="sha256-hVVnYaiADRTO2PzUGmuLJr8BLUSjGIZsDYGmIJLv2b8="
    crossorigin="anonymous"></script>
    <script type="text/javascript" src="js/jqueryModuleTab.js"></script>
    <script type="text/javascript">
      $(document).ready(function () {
        JqueryModuleTab.init("module-tab");
      });
    </script>

HTML

<div class="module-tab">
      <div>
        <ul class="legend">
          <li class="active">Tab 1</li>
          <li>Tab 2</li>
          <li>Tab 3</li>
          <li>Tab 4</li>
        </ul>
      </div>
      <div>
        <ul class="content">
          <li>
            <div class="thumb">
              <img src="img/circle1.png" alt="">
            </div>
            <div class="text">
              <h3>Content 1</h3>
              <p> Prova di testo con <em>em</em></p>
              <p> Prova di testo con <i>italic</i></p>
              <p> Prova di testo con <b>bold</b></p>
              <p> Prova di testo con <strong>strong</strong></p>
              <p>Prova con un <a href="#">link</a></p>
            </div>
          </li>
          <li>
            <div class="thumb">
              <img src="img/circle2.png" alt="">
            </div>
            <div class="text">
              <h3>Content 2</h3>
              <p> Prova di testo con <em>em</em></p>
              <p> Prova di testo con <i>italic</i></p>
              <p> Prova di testo con <b>bold</b></p>
              <p> Prova di testo con <strong>strong</strong></p>
              <p>Prova con un <a href="#">link</a></p>
            </div>
          </li>
          <li>
            <div class="thumb">
              <img src="img/circle3.png" alt="">
            </div>
            <div class="text">
              <h3>Content 3</h3>
              <p> Prova di testo con <em>em</em></p>
              <p> Prova di testo con <i>italic</i></p>
              <p> Prova di testo con <b>bold</b></p>
              <p> Prova di testo con <strong>strong</strong></p>
              <p>Prova con un <a href="#">link</a></p>
            </div>
          </li>
          <li>
            <div class="thumb">
              <img src="img/circle4.png" alt="">
            </div>
            <div class="text">
              <h3>Content 4</h3>
              <p> Prova di testo con <em>em</em></p>
              <p> Prova di testo con <i>italic</i></p>
              <p> Prova di testo con <b>bold</b></p>
              <p> Prova di testo con <strong>strong</strong></p>
              <p>Prova con un <a href="#">link</a></p>
            </div>
          </li>
        </ul>
      </div>
    </div>

MIT

Latest Posts

Related Posts