prototype.js(\u30d0\u30fc\u30b8\u30e7\u30f3:1.6.0)\u3092\u4f7f\u3044\u307e\u3059\u3002
\n\u4ee5\u4e0b\u3092\u9069\u5f53\u306a\u540d\u524d\u3067\u4fdd\u5b58\u3002tab.js\u3068\u304b\u3002<\/p>\n
\nfunction controltabs(tablistid, idx, tabidnm, tabbodyidnm){\nvar i = 0;\nobjp = $(tablistid);\nif (objp) {\n$A(objp.getElementsByTagName(\"a\")).each(function(obj, index){\ni = getindexfromname(obj.id, tabidnm);\nif (i >= 0) {\ncontroltab(i, tabidnm, tabbodyidnm, false);\n}\n});\n}\ncontroltab(idx, tabidnm, tabbodyidnm, true);\n}\nfunction controltab(idx, tabidnm, tabbodyidnm, val){\nvar obj;\nvar classnm = \"unselect\";\nif (val == true) classnm = \"select\";\nobj = $(tabidnm + idx);\nif (obj) obj.className = classnm;\nobj = $(tabbodyidnm + idx);\nif (obj) obj.className = classnm;\n}\nfunction getindexfromname(id, idnm) {\nrtn = -1;\nvar len1 = id.length;\nvar len2 = idnm.length;\nvar str = id.substr(len2, len1 - len2);\nif (str != \"\") {\nrtn = eval(str);\n}\nreturn rtn;\n}\n<\/pre>\n\u4ee5\u4e0b\u3082\u3002tab.css\u3068\u304b\u3002<\/p>\n
\ndiv.tablist {\nfont-size: smaller;\nfont-weight: normal;\ntext-align: left;\nvertical-align: middle;\nmargin: 0px;\nmargin-top: 10px;\npadding: 2px;\nborder-bottom: 2px solid #cccccc;\n}\ndiv.tablist a {\nvertical-align: middle;\nmargin: 0px;\nmargin-right: -1px;\npadding: 4px;\nbackground-color: #ffffff;\nborder: 1px solid #cccccc;\ntext-decoration: none;\n}\ndiv.tablist a.select {\nbackground-color: #c5e0e5;\n}\ndiv.tablist a:hover {\nbackground-color: #ffeecc;\n}\ndiv.tablist a.select:hover {\nbackground-color: #ffeecc;\n}\ndiv.tablist a.select:hover {\nbackground-color: #bbccbb;\n}\ndiv.frame {\ntext-align: left;\nmargin-top: 0px;\nmargin-bottom: 10px;\nborder: none;\npadding: 2px;\npadding-top: 10px;\n}\ndiv.frame div.select {\ndisplay: block;\n}\ndiv.frame div.unselect {\ndisplay: none;\n}\n<\/pre>\n\u672c\u4f53\u306f\u3053\u3093\u306a\u611f\u3058\u3002\u591a\u5206\u52d5\u304f\u3068\u601d\u3044\u307e\u3059\u3002<\/p>\n
\n<?xml version="1.0" encoding="EUC-JP"?>\n<!DOCTYPE html PUBLIC "-\/\/W3C\/\/DTD XHTML 1.0 Transitional\/\/EN"\n"http:\/\/www.w3.org\/TR\/xhtml1\/DTD\/xhtml1-transitional.dtd">\n<html xmlns="http:\/\/www.w3.org\/1999\/xhtml"\nxml:lang="ja" lang="ja">\n<head><meta http-equiv="content-type" content="text\/html; charset=EUC-JP" \/>\n<link rel="stylesheet" type="text\/css" href="..\/css\/tab.css" \/>\n<script src="..\/js\/prototype.js" type="text\/javascript"><\/script>\n<script src="..\/js\/tab.js" type="text\/javascript"><\/script>\n<\/head>\n<body >\n<div>\n<div class="tablist" id="tablist">\n<a href="#" class="select" id="tab1" onclick="controltabs('tablist', 1, 'tab', 'frame');">1<\/a>\n<a href="#" class="unselect" id="tab2" onclick="controltabs('tablist', 2, 'tab', 'frame');">2<\/a>\n<a href="#" class="unselect" id="tab3" onclick="controltabs('tablist', 3, 'tab', 'frame');">3<\/a>\n<\/div>\n<div class="frame">\n<div class="select" id="frame1">\uff11\u30da\u30fc\u30b8\u76ee\uff01<\/div>\n<div class="unselect" id="frame2">\uff12\u30da\u30fc\u30b8\u76ee\uff1f<\/div>\n<div class="unselect" id="frame3">\uff13\u30da\u30fc\u30b8\u76ee\uff01\uff01<\/div>\n<\/div>\n<\/body>\n<\/html>\n<\/pre>\n\u52d5\u3051\u3070\u3044\u3044\u3084\u7684\u767a\u60f3\u306a\u306e\u3067js\u3068css\u304c\u30bb\u30c3\u30c8\u3058\u3083\u306a\u3044\u3068\u52d5\u304b\u306a\u3044\u3058\u3083\u3093\u304b\u3068\u304b\u305d\u3046\u3044\u3046\u30c4\u30c3\u30b3\u30df\u306f\u307e\u3063\u305f\u304f\u3082\u3063\u3066\u6b63\u3057\u3044\u3067\u3059\u3002
\n\u3061\u306a\u307f\u306b\u5370\u5237\u3059\u308b\u3068\u304d\u306f\u3001css\u306e@media print\u3067\u300cunselect\u300d\u30af\u30e9\u30b9\u306edisplay\u3092block\u306b\u3057\u305f\u308a\u3059\u308b\u3068\u3044\u3044\u3068\u601d\u3044\u307e\u3059\u3002\u79c1\u306f\u3055\u3089\u306btablist\u306edisplay\u3092none\u306b\u3057\u307e\u3057\u305f\u3002<\/p>\n
\u3042\u3042\uff01\u3084\u3063\u3068\u8ffd\u3044\u3064\u3044\u305f\u3002\uff08\u65e5\u8a18\u304c\u3002\uff09
\n\u7537\u5b50\u30d0\u30ec\u30fc\u306e\u8a66\u5408\u306f\u9332\u753b\u3057\u3066\u308b\u306e\u3067\u5f8c\u3067\u3086\u3063\u304f\u308a\u89b3\u307e\u3059\u3002\u304c\u3093\u3070\u308c\u30fc\u30fc\u30fc\uff01\uff01\uff01<\/p>\n","protected":false},"excerpt":{"rendered":"
prototype.js(\u30d0\u30fc\u30b8\u30e7\u30f3:1.6.0)\u3092\u4f7f\u3044\u307e\u3059\u3002 \u4ee5\u4e0b\u3092\u9069\u5f53\u306a\u540d\u524d\u3067\u4fdd\u5b58\u3002tab.js\u3068\u304b\u3002 function controltabs(tablistid, idx, tabidnm, tabbodyidn<\/p>\n