html+css3+jq手风琴上下切换效果

1、准备好需要用到的图标。

3、书写hmtl代码。<br /><div class="accordion_container"> <h1>百度经验</h1> <div class="accordion"> <div class="first current"> <div class="content"><a href="#" target="_blank"><img src="images/200x95-1.jpg" /></a></div> <div class="tab"><strong><a href="#" target="_blank">百度经验</a></strong> <p>百度经验</p> </div> </div> <div class="second"> <div class="content second"><a href="#" target="_blank"><img src="images/200x95-2.jpg" /></a></div> <div class="tab"><strong><a href="#" target="_blank">百度经验</a></strong> <p>百度经验</p> </div> </div> <div class="third"> <div class="content third"><a href="#" target="_blank"><img src="images/200x95-3.jpg" /></a></div> <div class="tab"><strong><a href="#" target="_blank">百度经验</a></strong> <p>百度经验</p> </div> </div> </div></div>

5、书写并添加js代码。<script src="js/jquery.min.js"></script><script src="js/j-accordin.min.js"></script><script type="text/javascript"> $(document).ready(function(){ $('.accordion').jaccordion(); });</script>

7、代码整体结构。