实现点击效果和一些点击的特效不一定要用到JS，纯CSS也能实现简单的点击效果，废话不多说了，直接上代码。
有如下几种方法：

1.通过隐藏的checkbox或者radio等input来实现

<div class="demoMain">
<input type="checkbox" id="checkboxTest" />
<h3>DEMO(隐藏checkbox，通过checkbox的checked属性改变内容的值)</h3>
<label for="checkboxTest">点击测试</label>
<p>这是测试内容</p>
</div>

<style>
.demoMain input[type=checkbox]{
display:none;      
}
.demoMain input[type=checkbox]:checked ~ p{
color:red; 
}
</style>

2.通过锚点href来实现

<div class="demoMain">
<input type="checkbox" id="checkboxTest" />
<h3>DEMO(通过锚点的href属性来改变值)</h3>
<a href="#content">点击测试</a>
<p id="content" class="content">这是测试类容</p>
</div>

<style>
.demoMain p.content:target{
color:red;         
}
</style>

3.通过tabindex来实现

<div class="demoMain">
<input type="checkbox" id="checkboxTest" />
<h3>DEMO(通过tabindex来改变内容的值)</h3>
<span tabindex="0">点击测试</span>
<p class="content">这是测试内容</p>
</div>

<style>
.demoMain span:focus ~ .content{
color:blue;        
}
</style>

4.通过css3的transition来实现

<div class="demoMain">
<input type="checkbox" id="checkboxTest" />
<h3>DEMO(通过css3中的transition改变内容的值)</h3>
<span>点击测试</span>
<p class="contentTrans">这是测试内容</p>
</div>

<style>
.demoMain span:active ~ .contentTrans{
-webkit-transition:all 0s;
-moz-transition:all 0s;
color:red;     
}
.demoMain .contentTrans{
-webkit-transition:all 0s 999999s;
-moz-transition:all 0s;
}
</style>