html元素:
<ul>
<li><a href="#">PhotoShop软件</a></li>
<li><a href="#">illustrator软件</a></li>
<li><a href="#">Dreamweaver软件</a></li>
<li><a href="#">Fireworks软件</a></li>
</ul>
点击链接需要显示的内容:
<div class="middle">
<pPhotoShop有很多功能,在图像,图形,文字,出版等方面都有涉及。</p>
</div>
<div class="middle">
<p>Illustrator可以为线稿提供较高的精度和控制,简单到复杂项目都能生产。</p>
</div>
Jquery部分:
<script type="text/javascript">
$(function(){
if($(".middle").css('display') == 'none'){/*如果没有内容显示就显示第一个*/
$(".middle").eq(0).show();
}
$("li").click(function(){
$(".middle").hide();
var max = $("ul li").length; //得到总的长度
var num = max - $(this).nextAll().length ;//获取当前是第几个li被点击
$(".middle").eq(num - 1).show();/*显示第几个内容*/
})
})
</script>