用 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>
				
			

效果