タブ切り替えの、表示される順番を変えたい

下記のようなタブ切り替えでの、

最初の表示が現在は【総合】になっていますが、
ページに飛んだ際などに初めに表示させるのを【デザイン】にする方法を
教えていただきたいです。

よろしくお願い致します。

HTML
1<div class="tabs">
2  <input id="all" type="radio" name="tab_item" checked>
3  <label class="tab_item" for="all">総合</label>
4  <input id="programming" type="radio" name="tab_item">
5  <label class="tab_item" for="programming">プログラミング</label>
6  <input id="design" type="radio" name="tab_item">
7  <label class="tab_item" for="design">デザイン</label>
8  <div class="tab_content" id="all_content">
9    <div class="tab_content_description">
10      <p class="c-txtsp">総合の内容がここに入ります</p>
11    </div>
12  </div>
13  <div class="tab_content" id="programming_content">
14    <div class="tab_content_description">
15      <p class="c-txtsp">プログラミングの内容がここに入ります</p>
16    </div>
17  </div>
18  <div class="tab_content" id="design_content">
19    <div class="tab_content_description">
20      <p class="c-txtsp">デザインの内容がここに入ります</p>
21    </div>
22  </div>
23</div>

CSS
1/*タブ切り替え全体のスタイル*/
2.tabs {
3  margin-top: 50px;
4  padding-bottom: 40px;
5  background-color: #fff;
6  box-shadow: 0 0 10px rgba(0, 0, 0, 0.2);
7  width: 700px;
8  margin: 0 auto;}
9
10/*タブのスタイル*/
11.tab_item {
12  width: calc(100%/3);
13  height: 50px;
14  border-bottom: 3px solid #5ab4bd;
15  background-color: #d9d9d9;
16  line-height: 50px;
17  font-size: 16px;
18  text-align: center;
19  color: #565656;
20  display: block;
21  float: left;
22  text-align: center;
23  font-weight: bold;
24  transition: all 0.2s ease;
25}
26.tab_item:hover {
27  opacity: 0.75;
28}
29
30/*ラジオボタンを全て消す*/
31input[name="tab_item"] {
32  display: none;
33}
34
35/*タブ切り替えの中身のスタイル*/
36.tab_content {
37  display: none;
38  padding: 40px 40px 0;
39  clear: both;
40  overflow: hidden;
41}
42
43
44/*選択されているタブのコンテンツのみを表示*/
45#all:checked ~ #all_content,
46#programming:checked ~ #programming_content,
47#design:checked ~ #design_content {
48  display: block;
49}
50
51/*選択されているタブのスタイルを変える*/
52.tabs input:checked + .tab_item {
53  background-color: #5ab4bd;
54  color: #fff;
55}

行動規範の内容に同意します

回答1件

ベストアンサー

checkedの位置を変えればよいです。

HTML
1  <input id="all" type="radio" name="tab_item">
2  <label class="tab_item" for="all">総合</label>
3  <input id="programming" type="radio" name="tab_item">
4  <label class="tab_item" for="programming">プログラミング</label>
5  <input id="design" type="radio" name="tab_item" checked>
6  <label class="tab_item" for="design">デザイン</label>

投稿2020/07/08 02:23