Daco Note

用 CSS 做點下去就觸發的 onclick 效果：active 語法

效果

點這裡
出現了

CSS

				
					.clickme{
background-color:#fc9;
padding: 5px;
width: 100px;
}

.showthis{
background-color:#f90;
padding: 20px;
width: 100px;
display:none;
}

.clickme:focus + .showthis{
display:block;
}

HTML

				
					  <div class="clickme" tabindex="0">點這裡</div>
  <div class="showthis">出現了</div>

注意：那個「tabindex=”0″」很重要，要有這個語法，這個 div 才能成為焦點元件，就是可以被選到的意思。

點選後要套用到哪個元素可以參考「選擇器 class 與 id 以及階層關係」

我們可以試著做一點變化，加入一點動畫，把高度做一個縮放。

CSS

				
					.clickme{
background-color:#fc9;
padding: 5px;
width: 100px;
cursor: pointer;
}

.showthis{
background-color:#f90;
width: 100px;
max-height: 0;
opacity: 0;/*透明度*/
transition: 0.6s; 

}

.clickme:focus + .showthis{
opacity: 1;
padding: 20px;
max-height: 100%;
}

HTML

				
					  <div class="clickme" tabindex="0">點這裡1</div>
  <div class="showthis">出現了1</div>
<div class="clickme" tabindex="0">點這裡2</div>
  <div class="showthis">出現了2</div>
<div class="clickme" tabindex="0">點這裡3</div>
  <div class="showthis">出現了3</div>

效果