Javascriptを使わずCSSだけでタブ切り替えのタイムテーブルを作るソース
参考サイト: 【CSS】CSSだけでタブ切り替えを作る方法 - bagelee(ベーグリー) <style type="text/css"> <!-- #timetable{font-size:0;} .content{display:none;} .check{display:none;} #check1:checked ~ #check1_content, #check2:checked ~ #check2_content, #check3:checked ~ #check3_content, #check4:checked ~ #check4_content, #check5:checked ~ #check5_content, #check6:checked ~ #check6_content, #check7:checked ~ #check7_content {display:block;} .label:hover{color:red;} .check:checked + .label{border-bottom: solid 5px red;} .check:checked + .label:hover:after{color:red;} .label{ font-size:36px; padding:0 5px 0 5px; border-right: solid 1px gray; cursor:-moz-pointer; cursor:-webkit-pointer; cursor: pointer; } .content{ padding-top:10px; } .time{ width:80px; font-size:24px; text-align:right; } .subtime{ width:80px; font-size:16px; text-align:right; } .summary{ padding-left:10px; font-size:16px; } --> </style> <form id="timetable"> <input id="check0