<ul>
<li><a>图1</a></li>
<li><a>图2</a></li>
</ul>
<div id=‘con‘>
<div style="display: block"><img src="imgs/1.png"></div>
<div style="display: none"><img src="imgs/2.png"></div>
</div>
<script>
$(function(){
$(‘ul li‘).click(function(){
index=$(this).index();//获取当前是第几个li
$("#con div").eq(index).show();//li对应的div 显示出来
$("#con div").eq(index).siblings().hide(); //li对应的div的其他兄弟隐藏
$(this).css("color","red");//当前li中的字体颜色设置成红色
$(this).siblings().css("color",""); //当前li的其他兄弟的字体颜色不变
//可以使用链式编程优化上述代码
$(this).css("color","red").siblings（）.css(‘ color ‘,‘ ‘) ;
})
});
</script>
案例1：点击菜单显示相应的图片
原文：https://www.cnblogs.com/qtbb/p/11332619.html
