{"id":3380,"date":"2016-11-02T09:07:28","date_gmt":"2016-11-02T00:07:28","guid":{"rendered":"http:\/\/stuffy.dip.jp\/wordpress\/?p=2339"},"modified":"2016-11-02T09:07:28","modified_gmt":"2016-11-02T00:07:28","slug":"lets-play-javascript","status":"publish","type":"post","link":"https:\/\/www.stuffy.site\/wordpress\/?p=3380","title":{"rendered":"javascript \u3067\u904a\u3093\u3067\u307f\u305f"},"content":{"rendered":"

\"2016-11-02\"<\/a><\/p>\n

[tab_panel.html]<\/p>\n

\n<!DOCTYPE html PUBLIC \"-\/\/W3C\/\/DTD XHTML 1.0 Trasitional\/\/EN\" \"http:\/\/www.w3c.org\/TR\/xhtml1\/DTD\/xhtml1-transitional.dtd\">\n<html xmlns=\"http:\/\/www.w3.org\/1999\/xhtml\" xml:lang=\"ja\" lang=\"ja\">\n<head>\n\u00a0 <meta http-equiv=\"Content-Type\" content=\"text\/html; charset=UTF-8\" \/>\n\u00a0 <meta http-equiv=\"Content-Style-Type\" content=\"text\/css\" \/>\n\u00a0 <meta http-equiv=\"Content-Script-Type\" content=\"text\/javascript\" \/>\n\u00a0 <script type=\"text\/javascript\" src=\"jquery-3.1.1.min.js\"><\/script>\n\u00a0 <script type=\"text\/javascript\" src=\"tab_panel.js\"><\/script>\n\u00a0 <link rel=\"stylesheet\" href=\"tab_panel.css\" type=\"text\/css\" \/>\n\u00a0<title>\u30bf\u30d6\u30d1\u30cd\u30eb<\/title>\n<\/head>\n<body>\n\u00a0 <div id=\"container\">\n\u00a0\u00a0\u00a0 <ul class=\"tab\">\n\u00a0\u00a0\u00a0\u00a0\u00a0 <li>prototype.js<\/li>\n\u00a0\u00a0\u00a0\u00a0\u00a0 <li>script.aculo.us<\/li>\n\u00a0\u00a0\u00a0\u00a0\u00a0 <li>jQuery<\/li>\n\u00a0\u00a0\u00a0\u00a0\u00a0 <li>YUI<\/li>\n\u00a0\u00a0\u00a0 <\/ul>\n\u00a0\u00a0\u00a0 <ul class=\"panel\">\n\u00a0\u00a0\u00a0\u00a0\u00a0 <li>\u4ee3\u8868\u7684\u306aJavaScript \u30e9\u30a4\u30d6\u30e9\u30ea\u306e\u4e2d\u3067\u3082\u6b74\u53f2\u304c\u53e4\u304f\u3001\u6700\u3082\u666e\u53ca\u3057\u3066\u3044\u308bJavaScript \u30e9\u30a4\u30d6\u30e9\u30ea\u3067\u3059\u3002<\/li>\n\u00a0\u00a0\u00a0\u00a0\u00a0 <li>prototype.js \u3068\u540c\u6642\u306b\u5229\u7528\u3059\u308b\u30a2\u30cb\u30e1\u30fc\u30b7\u30e7\u30f3\u306a\u3069\u306eEffect\u51e6\u7406\u306b\u7279\u5316\u3057\u305f JavaScript \u30e9\u30a4\u30d6\u30e9\u30ea\u3067\u3059\u3002<\/li>\n\u00a0\u00a0\u00a0\u00a0\u00a0 <li>jQuery \u306f\u3001\u975e\u5e38\u306b\u8efd\u91cf\u306aJavaScript \u30e9\u30a4\u30d6\u30e9\u30ea\u3067\u3059\u3002<\/li>\n\u00a0\u00a0\u00a0\u00a0\u00a0 <li>YUI \u306f\u3001\u975e\u5e38\u306b\u591a\u5f69\u306a\u6a5f\u80fd\u3092\u6301\u3064 JavaScript \u30e9\u30a4\u30d6\u30e9\u30ea\u3067\u3059\u3002<\/li>\n\u00a0\u00a0\u00a0 <\/ul>\n\u00a0 <\/div>\n<\/body>\n<\/html><\/span><\/pre>\n
[tab_panel.css]<\/p>\n
* {\n\u00a0 margin: 0;\n\u00a0 padding: 0;\n\u00a0 list-style-type: none;\n}\n\u00a0div#container {\n\u00a0 margin: 10px auto;\n\u00a0 width: 500px;\n}\n\u00a0ul.tab li {\n\u00a0 float: left;\n\u00a0 padding: 4px 10px;\n\u00a0 cursor: pointer;\n\u00a0 background: #ddd;\n\u00a0 border: 1px solid #999;\n\u00a0 margin-right: 1px;\n\u00a0 position: relative;\n\u00a0 top: 1px;\n}\n\u00a0 ul.tab li.selected {\n\u00a0 border-bottom: 1px solid #eee;\n\u00a0 background: #eee;\n}\nul.panel li {\n\u00a0 clear: both;\n\u00a0 background: #eee;\n\u00a0 border: 1px solid #999;\n\u00a0 padding: 10px;\n}<\/span><\/pre>\n
[tab_panel.js]<\/p>\n
\n$(function() {\n\u00a0 $(\".tab li:first-child\").addClass(\"selected\");\n\u00a0 $(\".panel li:not(:first)\").css(\"display\",\"none\");\n\u00a0 $(\".tab li\").click(function() {\n\u00a0\u00a0\u00a0 $(\".tab li\").removeClass(\"selected\");\n\u00a0\u00a0\u00a0 $(this).addClass(\"selected\");\n\u00a0\u00a0\u00a0 $(\".panel li\").css(\"display\",\"none\");\n\u00a0\u00a0\u00a0 $(\".panel li:eq(\"+$(\".tab li\").index(this)+\")\").css(\"display\",\"block\");\n\u00a0 });\n});<\/span><\/pre>\n","protected":false},"excerpt":{"rendered":"
[tab_panel.html] <!DOCTYPE html PUBLIC “-\/\/W3C\/\/DTD XHTML 1.0 Trasitional\/\/EN” “http:\/\/www.w3c.org\/TR\/xhtml … \u7d9a\u304d\u3092\u8aad\u3080 javascript \u3067\u904a\u3093\u3067\u307f\u305f<\/span><\/a><\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[87,5],"tags":[],"class_list":["post-3380","post","type-post","status-publish","format-standard","hentry","category-javascript","category-software"],"_links":{"self":[{"href":"https:\/\/www.stuffy.site\/wordpress\/index.php?rest_route=\/wp\/v2\/posts\/3380","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.stuffy.site\/wordpress\/index.php?rest_route=\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.stuffy.site\/wordpress\/index.php?rest_route=\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.stuffy.site\/wordpress\/index.php?rest_route=\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/www.stuffy.site\/wordpress\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=3380"}],"version-history":[{"count":0,"href":"https:\/\/www.stuffy.site\/wordpress\/index.php?rest_route=\/wp\/v2\/posts\/3380\/revisions"}],"wp:attachment":[{"href":"https:\/\/www.stuffy.site\/wordpress\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=3380"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.stuffy.site\/wordpress\/index.php?rest_route=%2Fwp%2Fv2%2Fcategories&post=3380"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.stuffy.site\/wordpress\/index.php?rest_route=%2Fwp%2Fv2%2Ftags&post=3380"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}