HTMLで選択できるパネルを表現してみる

選択できるパネルを作ってみる

divタグで作ってみる

スタイルシートでパネルを作ります。
そのあと、クリックした時に色を変更するようにjQueryで作ってみました。

選択肢1

選択肢2

選択肢3

html

css

.panel-main {
   display: inline-flex;
}
.panel {
   width: 80px;
   height: 50px;
   border-right: 1px solid #ccc;
   border-top: 1px solid #ccc;
   border-bottom: 1px solid #ccc;
   background-color: #eee;
   cursor: pointer;
   font-size: 12px;
   display: flex;
   align-items: center;
   justify-content: center;
}
.panel-main .panel:first-child {
   border-left: 1px solid #ccc;
}
.panel:hover {
   background-color: #D7EEFF ;
}
.panel.panel-active {
   background-color: rgb(217, 229, 255);
}

jQuery

$(‘.panel’).click( function() {
$(‘.panel-main .panel’).removeClass(‘panel-active’);
$(this).addClass(‘panel-active’);
});

選択を解除できるようにしてみる

選択肢1

選択肢2

選択肢3

html

css

.panel-main2 {
   display: inline-flex;
}
.panel {
   width: 80px;
   height: 50px;
   border-right: 1px solid #ccc;
   border-top: 1px solid #ccc;
   border-bottom: 1px solid #ccc;
   background-color: #eee;
   cursor: pointer;
   font-size: 12px;
   display: flex;
   align-items: center;
   justify-content: center;
}
.panel-main2 .panel:first-child {
   border-left: 1px solid #ccc;
}
.panel:hover {
   background-color: #D7EEFF ;
}
.panel.panel-active {
   background-color: rgb(217, 229, 255);
}

jQuery

$(‘.panel-main2 .panel’).click( function() {
   if ($(this).hasClass(‘panel-active’)) {
     $(this).removeClass(‘panel-active’);
   } else {
     $(‘.panel-main2 .panel’).removeClass(‘panel-active’);
     $(this).addClass(‘panel-active’);
   }
});

tableタグで作ってみる

↑でdivタグで作ったパネルをtableタグに作り変えてみる。
選択を解除できる方で！！！

選択肢1

選択肢2

選択肢3

html

css

.panel-table {
   width: 240px;
}
.panel-table tr {
   height: 50px;
}
.panel-table tr td {
   border: 1px solid #ccc;
   cursor: pointer;
   vertical-align: middle;
   text-align: center;
   font-size: 12px;
   background-color: #eee;
}
.panel-table tr td:hover {
   background-color: #D7EEFF ;
}
.panel-table tr td.panel-active {
   background-color: rgb(217, 229, 255);
}

jQuery

$(‘.panel-table tr td’).click( function() {
   if ($(this).hasClass(‘panel-active’)) {
     $(this).removeClass(‘panel-active’);
   } else {
     $(‘.panel-table tr td’).removeClass(‘panel-active’);
     $(this).addClass(‘panel-active’);
   }
});

ちょっとデザインを変えてみる

アンダーラインで選択している状態を表現してみた

選択肢1

選択肢2

選択肢3

html

css

.panel-main3 {
   display: inline-flex;
}
.panel-main3 .panel {
   width: 80px;
   height: 50px;
   border-bottom: 1px solid #ddd;
   background-color: #eee;
   cursor: pointer;
   font-size: 12px;
   display: flex;
   align-items: center;
   justify-content: center;
}
.panel-main3 .panel:hover {
   border-bottom: 1px solid orange;
}
.panel-main3 .panel.panel-active {
   border-bottom: 2px solid red;
}