\nJavaScript\u3092\u4f7f\u3063\u305f\u30bf\u30d6\u30d1\u30cd\u30eb
\n\u30bf\u30d6\u3092\u30af\u30ea\u30c3\u30af\u3059\u308b\u3068
\n\u66f8\u304b\u308c\u305f\u5185\u5bb9\u304c\u8868\u793a\u3055\u308c\u307e\u3059\u3002<\/p>\n
<\/p>\n
\u2193\u4ee5\u4e0b\u304c\u5b9f\u969b\u306e\u30bd\u30fc\u30b9\u30b5\u30f3\u30d7\u30eb\u3067\u3059\u3002<\/p>\n
\u25bcscript<\/p>\n
<script src=\"http:\/\/ajax.googleapis.com\/ajax\/libs\/jquery\/1.9.0\/jquery.min.js\"><\/script>\r\n<script type=\"text\/javascript\">\r\n\r\n$(function(){\r\n\t\r\n\t$(\"ul.panel li:not(\"+$(\"ul.tab li a.selected\").attr(\"href\")+\")\").hide();\r\n\r\n\t$(\"ul.tab li a\").click(function(){\r\n\t\tif($($(this).attr(\"href\")).css(\"display\") == \"none\") {\r\n\t\t\tvar a = $(this);\r\n\t\t\t$($(\"ul.tab li a.selected\").attr(\"href\")).slideUp(\"normal\",function(){\r\n\t\t\t\t$(a.attr(\"href\")).slideDown(\"normal\");\r\n\t\t\t\t$(\"ul.tab li a.selected\").removeClass(\"selected\");\r\n\t\t\t\ta.addClass(\"selected\");\r\n\t\t\t});\r\n\t\t}\r\n\t\treturn false;\r\n\t});\r\n\r\n});\r\n\t<\/script><\/pre>\n\u25bcCSS<\/p>\n
<style type=\"text\/css\">\r\n*{\r\n\tmargin:0;\r\n\tpadding:0;\r\n}\r\n#container{\r\n\twidth:800px;\r\n\tmargin:50px auto;\r\n}\r\nul.tab{\r\n\tpadding:0;\r\n}\r\nul.tab li{\r\n\tlist-style-type:none;\r\n\twidth:160px;\r\n\theight:40px;\r\n\tfloat:left;\r\n}\r\nul.tab li a{\r\n\toutline:none;\r\n\tdisplay:block;\r\n\tcolor:blue;\r\n\tline-height:40px;\r\n\ttext-align:center;\r\n}\r\nul.tab li a.selected{\r\n\ttext-decoration:none;\r\n\tcolor:#333;\r\n\tcursor:default;\r\n}\r\nul.panel{\r\n\tclear:both;\r\n\tborder:1px solid #666;\r\n\tborder-top:none;\r\n\tpadding:0;\r\n}\r\nul.panel li{\r\n\tlist-style-type:none;\r\n\tpadding:10px;\r\n\ttext-indent:1em;\r\n\tcolor:#666;\r\n}\r\n\u3000<\/style>\r\n\t<\/pre>\n\u25bcXHTML<\/p>\n
\u3000 <\/p>\n
<body>\r\n\u3000\u3000\u3000\u3000<div id=\"container\">\r\n\u3000\u3000\u3000\u3000\u3000\u3000<ul class=\"tab\">\r\n\t\t\t\t<li><a href=\"#tab1\" class=\"selected\">\u592a\u967d<\/a><\/li>\r\n\t\t\t\t<li><a href=\"#tab2\">\u96fb\u78c1\u6ce2<\/a><\/li>\r\n\t\t\t\t<li><a href=\"#tab3\">\u5730\u7403<\/a><\/li>\r\n\t\t\t\t<li><a href=\"#tab4\">\u5b87\u5b99<\/a><\/li>\r\n\t\t\t\t<li><a href=\"#tab5\">\u30a8\u30cd\u30eb\u30ae\u30fc<\/a><\/li>\r\n\t\u3000\u3000<\/ul>\r\n\t\t<ul class=\"panel\">\r\n<li id=\"tab1\" class=\"selected\">\r\n\u4e07\u751f\u4e07\u7269\u306f\u3000\u5e83\u5927\u7121\u8fba\u306a\u5927\u6148\u60b2\u306a\u308a\r\n\u79c1\u305f\u3061\u306e\u8089\u4f53\u306f\u3001\u7a7a\u6c17\u3084\u690d\u7269\u306a\u3069\u306e\u30a8\u30cd\u30eb\u30ae\u30fc\u3092\u5438\u53ce\u3059\u308b\u3053\u3068\u306b\u3088\u3063\u3066\u8089\u4f53\u4fdd\u5b58\u304c\u53ef\u80fd\u3067\u3042\u308a\u3001\u5730\u7403\u81ea\u4f53\u306e\u81ea\u8ee2\u30fb\u516c\u8ee2\u306b\u3088\u3063\u3066\u3001 \u5730\u7403\u4e0a\u3067\u306e\u5b89\u5b9a\u3057\u305f\u751f\u6d3b\u304c\u3067\u304d\u307e\u3059\u3002\u3053\u306e\u4e8b\u5b9f\u3060\u3051\u3092\u3068\u3063\u3066\u307f\u3066\u3082\u3001\u79c1\u305f\u3061\u306f\u611f\u8b1d\u306e\u5fc3\u3092\u6301\u305f\u306a\u3051\u308c\u3070\u306a\u308a\u307e\u305b\u3093\u3002\u592a\u967d\u306e\u71b1\u30a8\u30cd\u30eb\u30ae\u30fc\u306b\u3064\u3044\u3066\u3044\u3044\u307e\u3059\u3068\u3001\u4e00\u79d2\u9593\u306b\u653e\u5c04\u3055\u308c\u308b\u71b1\u30a8\u30cd\u30eb\u30ae\u30fc\u306f\u30019.3\u00d710(22\u4e57)\/2.5\u00d710(3\u4e57)\u30ad\u30ed\u30ab\u30ed\u30ea\u30fc\u3068\u3044\u3046\u83ab\u5927\uff08\u3070\u304f\u3060\u3044\uff09\u306a\u3082\u306e\u3067\u3059\u3002\u3053\u308c\u306f\u77f3\u70ad\u3092\u4e00\u79d2\u9593\u306b\u4e8c\u767e\u4e07\u30c8\u30f3\u71c3\u713c\u3055\u305b\u305f\u71b1\u30a8\u30cd\u30eb\u30ae\u30fc\u306b\u5339\u6575\u3057\u307e\u3059\u3002\u79c1\u305f\u3061\u306f\u3001\u5bb6\u5ead\u3084\u8077\u5834\u3067\u30ac\u30b9\u3084\u96fb\u6c17\u3092\u4f7f\u3044\u3001\u3053\u308c\u306b\u5bfe\u3057\u3066\u4ee3\u4fa1\u3092\u6255\u3063\u3066\u3044\u307e\u3059\u3002\u305d\u306e\u6599\u91d1\u3092\u30ac\u30b9\u4f1a\u793e\u3084\u96fb\u6c17\u4f1a\u793e\u306b\u6255\u308f\u306a\u3051\u308c\u3070\u3001\u4f1a\u793e\u306f\u7121\u6148\u60b2\u306b\u3082\u71c3\u6599\u4f9b\u7d66\u3092\u3084\u3081\u3066\u3057\u307e\u3044\u307e\u3059\u3002<\/li>\r\n<li id=\"tab2\">\r\n\u592a\u967d\u306e\u306a\u3044\u4e16\u754c\u3092\u4e00\u5ea6\u3067\u3082\u60f3\u50cf\u3057\u305f\u3053\u3068\u304c\u3042\u308b\u3067\u3057\u3087\u3046\u304b\u3002\r\n\u6211\u3005\u4eba\u9593\u306f\u3082\u3061\u308d\u3093\u306e\u3053\u3068\u3001\u5730\u4e0a\u306e\u751f\u7269\u306f\u751f\u304d\u3066\u306f\u3044\u3051\u307e\u305b\u3093\u3002\r\n\u967d\u306e\u5f53\u305f\u3089\u306a\u3044\u5730\u4e0b\u306e\u751f\u7269\u3082\u3001\u6d77\u5e95\u6df1\u304f\u904a\u6cf3\u3059\u308b\u9b5a\u985e\u306b\u3057\u3066\u3082\u3001\u751f\u304d\u308b\u3053\u3068\u306f\u4e0d\u53ef\u80fd\u3067\u3059\u3002\r\n\u306a\u305c\u304b\u3068\u3044\u3044\u307e\u3059\u3068\u3001\u5730\u7403\u306e\u751f\u7269\u306f\u3001\u592a\u967d\u306e\u71b1\u3068\u5730\u7403\u306e\u5730\u71b1\u306b\u3088\u3063\u3066\u751f\u547d\u3092\u4fdd\u6301\u3057\u3066\u3044\u307e\u3059\u304c\u3001\u592a\u967d\u304c\u305d\u306e\u5149\u3092\u6d88\u3057\u307e\u3059\u3068\u3001 \u5730\u7403\u3082\u307e\u305f\u3001\u305d\u306e\u751f\u547d\u6d3b\u52d5\u3092\u505c\u6b62\u3057\u307e\u3059\u3002\r\n\u5730\u7403\u81ea\u4f53\u306e\u71b1\u6e90\u306f\u3001\u96fb\u78c1\u6ce2\u91cd\u529b\u3068\u3044\u3046\u3082\u306e\u3092\u5a92\u4f53\uff08\u3070\u3044\u305f\u3044\uff09\u306b\u3057\u3066\u3001\u592a\u967d\u71b1\u3092\u5438\u53ce\u4fdd\u6301\u3059\u308b\u3053\u3068\u306b\u3088\u3063\u3066\u7dad\u6301\u3055\u308c\u3066\u3044\u308b\u306e\u3067\u3059\u3002<\/li>\r\n<li id=\"tab3\">\r\n\u5730\u7403\u306e\u5185\u90e8\u306f\u3001\u706b\u5c71\u3092\u307f\u3066\u3082\u5206\u304b\u308b\u901a\u308a\u3001\u6eb6\u5ca9\u3068\u306a\u3063\u3066\u71c3\u3048\u3066\u3044\u307e\u3059\u3002\r\n\u305d\u308c\u306f\u307e\u3055\u306b\u5c0f\u592a\u967d\u306e\u3088\u3046\u306b\u71c3\u3048\u3066\u3044\u308b\u306e\u3067\u3059\u3002\r\n\u5c0f\u592a\u967d\u306f\u89aa\u592a\u967d\u306e\u5f71\u97ff\u3092\u7d76\u3048\u305a\u3046\u3051\u3066\u3044\u308b\u3053\u3068\u3092\u77e5\u3063\u3066\u3082\u3089\u3044\u305f\u3044\u3068\u601d\u3044\u307e\u3059\u3002\r\n\u3053\u308c\u306b\u3064\u3044\u3066\u4eba\u9593\u306e\u8089\u4f53\u306e\u4f8b\u304c\u5206\u304b\u308a\u3084\u3059\u3044\u3068\u601d\u3044\u307e\u3059\u3002\r\n\u5fc3\u81d3\u304b\u3089\u51fa\u3055\u308c\u305f\u65b0\u3057\u3044\u8840\u6db2\u306f\u3001\u5404\u8840\u7ba1\u3092\u901a\u3063\u3066\u80ba\u81d3\u30fb\u809d\u81d3\u3001\u3042\u308b\u3044\u306f\u80c3\u8178\u306e\u50cd\u304d\u3092\u52a9\u3051\u3066\u3044\u307e\u3059\u3002\r\n\u3057\u304b\u3057\u3001\u5fc3\u81d3\u304c\u305d\u306e\u6a5f\u80fd\u3092\u6b62\u3081\u305f\u306a\u3089\u3070\u3069\u3046\u3067\u3057\u3087\u3046\u304b\u3002\r\n\u5404\u8af8\u5668\u7ba1\u3082\u3001\u540c\u69d8\u306b\u3057\u3066\u305d\u306e\u6a5f\u80fd\u3092\u6b62\u3081\u3066\u3057\u307e\u3044\u307e\u3059\u3002\r\n\u8840\u6db2\u306e\u4e07\u904d\u306a\u3044\u50cd\u304d\u306b\u3088\u3063\u3066\u8089\u4f53\u306e\u5404\u8af8\u5668\u7ba1\u306f\u6d3b\u767a\u306b\u6d3b\u52d5\u3057\u3001\u751f\u6d3b\u3059\u308b\u3053\u3068\u304c\u3067\u304d\u308b\u306e\u3067\u3059\u3002<\/li>\r\n<li id=\"tab4\">\r\n\u5927\u5b87\u5b99\u4f53\u306f\u610f\u8b58\u306e\u5f53\u4f53\u306b\u3057\u3066\u3000\u610f\u8b58\u306e\u4e2d\u5fc3\u306f\u5fc3\u306a\u308a\r\n\u5373\u3061\u3001\u592a\u967d\u3092\u3075\u304f\u3081\u305f\u5b87\u5b99\u5168\u4f53\u306f\u3001\u3042\u308b\u5049\u5927\u306a\u610f\u8b58\u305d\u306e\u3082\u306e\u306e\u4e2d\u306b\u3042\u3063\u3066\u52d5\u3044\u3066\u3044\u308b\u3002\r\n\u52d5\u304b\u3055\u308c\u3066\u3044\u308b\u3002\u305d\u3046\u3057\u3066\u3001\u305d\u306e\u610f\u8b58\u305d\u306e\u3082\u306e\u306f\u5b87\u5b99\u306e\u5fc3\u304c\u4e2d\u5fc3\u3092\u306a\u3057\u3066\u3044\u308b\u306e\u3067\u3042\u308a\u307e\u3059\u3002\r\n\u5927\u5b87\u5b99\u3068\u3044\u3046\u3082\u306e\u306f\u3001\u305f\u3060\u6f2b\u7136\uff08\u307e\u3093\u305c\u3093\uff09\u3068\u5076\u7136\u306b\u51fa\u6765\u4e0a\u304c\u3063\u305f\u3082\u306e\u3067\u306f\u3042\u308a\u307e\u305b\u3093\u3002\r\n\u6642\u9593\u306e\u4f8b\u3067\u306f\u3042\u308a\u307e\u305b\u3093\u304c\u3001\u767e\u5e74\u306b\u5343\u5206\u306e\u4e00\u79d2\u3057\u304b\u72c2\u308f\u306a\u3044\u307b\u3069\u306e\u6b63\u78ba\u3055\u3067\u52d5\u3044\u3066\u3044\u307e\u3059\u3002\r\n\u5225\u306a\u8a00\u8449\u3067\u3044\u3048\u3070\u3001\u5927\u5b87\u5b99\u306e\u69cb\u6210\u3068\u3044\u3046\u3082\u306e\u306f\u3001\u6700\u521d\u304b\u3089\u8a08\u753b\u3055\u308c\u305d\u306e\u8a08\u753b\u306b\u3082\u3068\u3065\u3044\u3066\u52d5\u3044\u3066\u3044\u308b\u306e\u3067\u3059\u3002\u8a08\u753b\u304b\u3089\u5916\u308c\u305f\u3082\u306e\u306f\u4f55\u4e00\u3064\u3042\u308a\u307e\u305b\u3093\u3002\u305d\u3046\u3057\u3066\u3001\u305d\u306e\u8a08\u753b\u306f\u610f\u8b58\u306e\u4e2d\u5fc3\u3067\u3042\u308b\u5fc3\u306b\u3088\u3063\u3066\u3001\u5fc5\u7136\u306e\u904e\u7a0b\u306e\u4e0b\u306b\u52d5\u3044\u3066\u3044\u308b\u306e\u3067\u3059\u3002\u3053\u306e\u3053\u3068\u3092\u81ea\u5f8b\u4f5c\u7528\u3068\u3082\u3044\u3044\u307e\u3059\u3002<\/li>\r\n<li id=\"tab5\">\r\n\u30a8\u30cd\u30eb\u30ae\u30fc\u3068\u3044\u3046\u3082\u306e\u306b\u306f\u3001\u3059\u3079\u3066\u4e2d\u5fc3\u304c\u3042\u308a\u3001\u6838\u3068\u3044\u3046\u3082\u306e\u304c\u3042\u308a\u307e\u3059\u3002\r\n\u7269\u8cea\u306f\u539f\u5b50\u304b\u3089\u6210\u308a\u7acb\u3061\u3001\u539f\u5b50\u306f\u539f\u5b50\u6838\u3068\u3044\u3046\u3082\u306e\u304b\u3089\u51fa\u6765\u3066\u3044\u307e\u3059\u3002\r\n\u305d\u3046\u3057\u3066\u305d\u306e\u6838\u306e\u4e2d\u306b\u306f\u3001\u30d7\u30ed\u30c8\u30f3\u3068\u30cb\u30e5\u30fc\u30c8\u30ed\u30f3\u304c\u5b58\u5728\u3057\u3001\u6838\u3092\u69cb\u6210\u3057\u3066\u3044\u307e\u3059\u3002\r\n\u967d\u5b50\u3068\u4e2d\u6027\u5b50\u3067\u3059\u3002\u305d\u306e\u6838\u3092\u4e2d\u5fc3\u306b\u3001\u3044\u308f\u3086\u308b\u9670\u5916\u96fb\u5b50\u304c\u3001\u4e00\u5b9a\u306e\u8ecc\u9053\u3092\u901a\u3063\u3066\u5186\u904b\u52d5\u3092\u7d9a\u3051\u3066\u3044\u307e\u3059\u3002\u6838\u3068\u9670\u5916\u96fb\u5b50\u306e\u95a2\u4fc2\u306f\u3001\u5b8c\u5168\u306b\u8abf\u548c\u3055\u308c\u3066\u3044\u307e\u3059\u3002\u592a\u967d\u306e\u307e\u308f\u308a\u3092\u5730\u7403\u3084\u706b\u661f\u304c\u5186\u904b\u52d5\u3092\u884c\u3063\u3066\u3044\u308b\u306e\u3068\u540c\u3058\u3067\u3059\u3002\u81ea\u7136\u306f\u3001\u5e38\u306b\u8abf\u548c\u3055\u308c\u3066\u3044\u307e\u3059\u3002\u307e\u305f\u8abf\u548c\u3055\u308c\u308b\u3088\u3046\u306b\u51fa\u6765\u3066\u3044\u307e\u3059\u3002\r\n\u305d\u308c\u306f\u795e\u4ecf\u306e\u610f\u601d\u306b\u3082\u3068\u3065\u3044\u3066\u52d5\u3044\u3066\u3044\u307e\u3059\u304b\u3089\u3001\u4e0d\u8abf\u548c\u3092\u8d77\u3053\u3059\u4f59\u5730\u304c\u306a\u3044\u306e\u3067\u3042\u308a\u307e\u3059\u3002<\/li>\r\n<\/ul>\r\n\u3000\u3000<\/div>\r\n\t<\/body>\r\n<\/pre>\n