Flexbox

2018年9月1日 / 最終更新日 : 2018年9月24日 HTML & CSS

【Flexbox】Flexアイテムのflexプロパティについて

display:flexプロパティで Flexboxにした際、横並び（設定によって縦並び）になる子要素に設定出来る、flexプロパティについて解説します。 flexプロパティには、 flex-grow flex-shr […]

2018年7月29日 / 最終更新日 : 2018年7月31日 JavaScript / jQuery

【jQuery】タブパネルの実装とレイアウト

タブの選択によって表示内容を切り替えられるパネルをjQueryで実装します。完成サンプルこちらをクリック – HTML –

<body>
  <div id="container">
    <ul class="tab">
      <li><a href="#newsTab" class="selected">ニュース</a></li>
      <li><a href="#keizaiTab">経済</a></li>
      <li><a href="#enterTab">エンタメ</a></li>
      <li><a href="#sportsTab">スポーツ</a></li>
    </ul>
    <ul class="panel">
      <li id="newsTab">
        <ul>
          <li><a href="index.html">ニュース 1</a></li>
          <li><a href="index.html">ニュース 2</a></li>
          <li><a href="index.html">ニュース 3</a></li>
        </ul>
      </li>
      <li id="keizaiTab">
        <ul>
          <li><a href="index.html">経済 1</a></li>
          <li><a href="index.html">経済 2</a></li>
          <li><a href="index.html">経済 3</a></li>
        </ul>
      </li>
      <li id="enterTab">
        <ul>
          <li><a href="index.html">エンタメ 1</a></li>
          <li><a href="index.html">エンタメ 2</a></li>
          <li><a href="index.html">エンタメ 3</a></li>
        </ul>
      </li>
      <li id="sportsTab">
        <ul>
          <li><a href="index.html">スポーツ 1</a></li>
          <li><a href="index.html">スポーツ 2</a></li>
          <li><a href="index.html">スポーツ 3</a></li>
        </ul>
      </li>    
    </ul>
  </div>
<script src="tabPanel.js"></script>
</body>