简单jquery实现切换

效果图:

html:代码

1 <div class="yunxuhelptopd">
2       <ul>
3         <li class="on one1"><div></div>什么是虚拟主机</li>
4         <li><div></div>如何选购</li>
5         <li><div></div>主机备案</li>
6         <li><div></div>使用和升级</li>
7         <li><div></div>服务</li>
8       </ul>
9     </div>

 1  <div class="yunxuhelpwamp">
 2      
 3         <div class="yunxuhelpshow" style="display: block;">
 4             内容11111
 5          </div>
 6　　　　 <div class="yunxuhelpshow" style="display: none;">
 7             内容222
 8         </div>
 9 　　　　<div class="yunxuhelpshow" style="display: none;">
10             内容333
11         </div>
12 　　　　<div class="yunxuhelpshow" style="display: none;">
13             内容4444
14        </div>
15 　　　　<div class="yunxuhelpshow" style="display: none;">
16             内容5555
17        </div>
18　　　　 <div class="yunxuhelpshow" style="display: none;">
19             内容6666
20        </div>
21  </div>
22          

jquery代码:

 1 <script type="text/javascript" src="./zlibs/js/jquery-1.8.1.min.js"></script>
 2 <script type="text/javascript">
 3    $(function(){          
 4     $('.yunxuhelptopd li').click(function(){
 5         var liindex = $('.yunxuhelptopd li').index(this);
 6         $(this).addClass('on').siblings().removeClass('on');
 7         $('.yunxuhelpwamp div.yunxuhelpshow').eq(liindex).fadeIn(150).siblings('div.yunxuhelpshow').hide();
 8     });
 9     
10     });
11 </script>