「jQuery」タブのサンプル

2014年1月7日2021年8月9日

書式
$(セレクタ).tabs();
使用例

<link rel="stylesheet" href="https://ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/themes/smoothness/jquery-ui.css">

<div id="cft">
      <ul>
            <li><a href="#tab1">tabA</a></li>
            <li><a href="#tab2">tabB</a></li>
            <li><a href="#tab3">tabC</a></li>
      </ul>
      <div id="tab1">
            aaa
      </div>
      <div id="tab2">
            bbbb
      </div>
      <div id="tab3">
            cccc
      </div>
</div>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js"></script>

<script>
$(function() {
      $("#cft").tabs();
});
</script>