<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 (); // Get the current is the first of several li
$ ( "# Con div") eq (index) .show ();. // li corresponding div displayed
.. $ ( "# Con div") eq (index) .siblings () hide (); // li corresponding other brothers hidden div
$ (This) .css ( "color", "red"); // li in the current font color to red
$ (This) .siblings () css ( "color", "");. // other brothers li current font color change
// chain may be used to optimize the programming code above
$(this).css("color","red").siblings（）.css(' color ',' ') ;
})
});
</script>