最近剛好在做一個東西，迫使我要想想如何使用單純使用 CSS 來控制網頁上的可視元素，並且不使用 JS 來做。說實在話，目前要使用純 CSS 來控制網頁上的元素，實在是有困難，畢竟 CSS 並沒有提供像是 JS 那樣多的 Event 可以用。

問題

這個效果就是，要 click 網頁上的一個元素之後，讓網頁上其他的 block 可以 hidden 或者 visible。

使用 JS

如果使用 JS，這真的很簡單，譬如使用 JQuery 來做的話

1
2
3
4
5
(function($){
  $("#clickMe").on('click', () => {
    $( "p" ).toggle();
  });
})($);

使用 CSS

因為無法針對某個元素的 click 來控制是否可視，所以就要繞比較大一圈了

html

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
<label for="block1"> show block 1</label>
<label for="block2"> show block 2</label>
<hr>
<div>
  <input type="radio" name="block-toggle" id="block1" checked="checked">
  <div class="block">
    hi, i am block1
  </div>
</div>

<div>
  <input type="radio" name="block-toggle" id="block2">
  <div class="block">
    hi, i am block2
  </div>
</div>

css

1
2
3
4
5
6
7
8
9
10
11
12
13
<style>
  input[type=radio]:checked + div.block {
    display: block;
  }

  input[type=radio]:not(:checked) + div.block {
    display: none;
  }

  input[type=radio] {
    display: none;
  }
</style>

原理

其實重點是在 css selector 的部分，主要是判斷 input Radio 有沒有被 checked 而已。有被 checked ，就把當前 radio 的下一個 div.block 顯示出來，如果沒有，就把當前 radio 的下一個 div.block 隱藏起來；而 radio 的 click 則是透過 label 這個 tag 來觸發。