日: 2016年11月2日

javascript で遊んでみた

2016-11-02

[tab_panel.html]


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Trasitional//EN" "http://www.w3c.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ja" lang="ja">
<head>
  <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
  <meta http-equiv="Content-Style-Type" content="text/css" />
  <meta http-equiv="Content-Script-Type" content="text/javascript" />
  <script type="text/javascript" src="jquery-3.1.1.min.js"></script>
  <script type="text/javascript" src="tab_panel.js"></script>
  <link rel="stylesheet" href="tab_panel.css" type="text/css" />
 <title>タブパネル</title>
</head>
<body>
  <div id="container">
    <ul class="tab">
      <li>prototype.js</li>
      <li>script.aculo.us</li>
      <li>jQuery</li>
      <li>YUI</li>
    </ul>
    <ul class="panel">
      <li>代表的なJavaScript ライブラリの中でも歴史が古く、最も普及しているJavaScript ライブラリです。</li>
      <li>prototype.js と同時に利用するアニメーションなどのEffect処理に特化した JavaScript ライブラリです。</li>
      <li>jQuery は、非常に軽量なJavaScript ライブラリです。</li>
      <li>YUI は、非常に多彩な機能を持つ JavaScript ライブラリです。</li>
    </ul>
  </div>
</body>
</html>

[tab_panel.css]

* {
  margin: 0;
  padding: 0;
  list-style-type: none;
}
 div#container {
  margin: 10px auto;
  width: 500px;
}
 ul.tab li {
  float: left;
  padding: 4px 10px;
  cursor: pointer;
  background: #ddd;
  border: 1px solid #999;
  margin-right: 1px;
  position: relative;
  top: 1px;
}
  ul.tab li.selected {
  border-bottom: 1px solid #eee;
  background: #eee;
}
ul.panel li {
  clear: both;
  background: #eee;
  border: 1px solid #999;
  padding: 10px;
}

[tab_panel.js]


$(function() {
  $(".tab li:first-child").addClass("selected");
  $(".panel li:not(:first)").css("display","none");
  $(".tab li").click(function() {
    $(".tab li").removeClass("selected");
    $(this).addClass("selected");
    $(".panel li").css("display","none");
    $(".panel li:eq("+$(".tab li").index(this)+")").css("display","block");
  });
});