three-inc/tabs2.html

## tabs2.html
<!doctype html>
<html lang="ja">
<head>
  <meta charset="utf-8" />
  <title>jQuery UI Tabs</title>

  <link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
  <script src="https://code.jquery.com/jquery-1.12.4.js"></script>
  <script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>

  <script>
  //タブ化
   $( function() {
     $( "#tabs" ).tabs();
   } );

  //スムーススクロール
  $(function(){
  $('a[href^="#"]').click(function(){
      var speed = 500;
      var href= $(this).attr("href");
      var target = $(href == "#" || href == "" ? 'html' : href);
      var position = target.offset().top;
      $("html, body").animate({scrollTop:position}, speed, "swing");
      return false;
    });
  });

  //<span>要素をクリックしてタブを切り替え
  $(function(){
    $('#tabs div[id != "tabs-1"]').hide();
    $( 'span[data-href]' ).on( 'click', function() {
        $("#tabs div").hide();
        $( $( this ).data( 'href') ).show();
        return false;
    });
});
  </script>

  </head>

  <body>
   <h1>spanによるタブ実装サンプル</h1>
   <div id="tabs">
    <ul>
      <li><span data-href="#tabs-1">タブ１</span></li>
      <li><span data-href="#tabs-2">タブ２</span></li>
      <li><span data-href="#tabs-3">タブ３</span></li>
    </ul>
    <div id="tabs-1">
      <p>タブ１の内容はこちら</p>
    </div>
    <div id="tabs-2">
      <p>タブ２の内容はこちら</p>
    </div>
    <div id="tabs-3">
      <p>タブ３の内容はこちら。<br>文字量が多い場合はこのようになります。文字量が多い場合はこのようになります。文字量が多い場合はこのようになります。文字量が多い場合はこのようになります。文字量が多い場合はこのようになります。文字量が多い場合はこのようになります。文字量が多い場合はこのようになります。文字量が多い場合はこのようになります。文字量が多い場合はこのようになります。</p>

      <p>タブ３の内容はこちら。<br>文字量が多い場合はこのようになります。文字量が多い場合はこのようになります。文字量が多い場合はこのようになります。文字量が多い場合はこのようになります。文字量が多い場合はこのようになります。文字量が多い場合はこのようになります。文字量が多い場合はこのようになります。文字量が多い場合はこのようになります。文字量が多い場合はこのようになります。</p>
    </div>
   </div>
  </body>

</html>
	<!doctype html>
	<html lang="ja">
	<head>
	<meta charset="utf-8" />
	<title>jQuery UI Tabs</title>

	<link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
	<script src="https://code.jquery.com/jquery-1.12.4.js"></script>
	<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>

	<script>
	//タブ化
	$( function() {
	$( "#tabs" ).tabs();
	} );

	//スムーススクロール
	$(function(){
	$('a[href^="#"]').click(function(){
	var speed = 500;
	var href= $(this).attr("href");
	var target = $(href == "#" \|\| href == "" ? 'html' : href);
	var position = target.offset().top;
	$("html, body").animate({scrollTop:position}, speed, "swing");
	return false;
	});
	});

	//<span>要素をクリックしてタブを切り替え
	$(function(){
	$('#tabs div[id != "tabs-1"]').hide();
	$( 'span[data-href]' ).on( 'click', function() {
	$("#tabs div").hide();
	$( $( this ).data( 'href') ).show();
	return false;
	});
	});
	</script>

	</head>

	<body>
	<h1>spanによるタブ実装サンプル</h1>
	<div id="tabs">
	<ul>
	<li><span data-href="#tabs-1">タブ１</span></li>
	<li><span data-href="#tabs-2">タブ２</span></li>
	<li><span data-href="#tabs-3">タブ３</span></li>
	</ul>
	<div id="tabs-1">
	<p>タブ１の内容はこちら</p>
	</div>
	<div id="tabs-2">
	<p>タブ２の内容はこちら</p>
	</div>
	<div id="tabs-3">
	<p>タブ３の内容はこちら。<br>文字量が多い場合はこのようになります。文字量が多い場合はこのようになります。文字量が多い場合はこのようになります。文字量が多い場合はこのようになります。文字量が多い場合はこのようになります。文字量が多い場合はこのようになります。文字量が多い場合はこのようになります。文字量が多い場合はこのようになります。文字量が多い場合はこのようになります。</p>

	<p>タブ３の内容はこちら。<br>文字量が多い場合はこのようになります。文字量が多い場合はこのようになります。文字量が多い場合はこのようになります。文字量が多い場合はこのようになります。文字量が多い場合はこのようになります。文字量が多い場合はこのようになります。文字量が多い場合はこのようになります。文字量が多い場合はこのようになります。文字量が多い場合はこのようになります。</p>
	</div>
	</div>
	</body>

	</html>