<style><!--

body{margin:50px 50px;padding:0;}

.xxk{}

.xxk ul{color:#fff;text-align:center;line-height:30px;margin:0;padding:0;}

.xxk ul li{list-style:none;width:100px;background:#000; cursor:pointer;}

.xxk ul li.active{background:red;color:#000;}

.xxk ul li div{background:#fff;border:1px solid #000;display:none;}

 

.hello{border:1px solid #000;width:100px;}

.hello div{display:none;line-height:30px;width:100px;}

--></style>

<p>

<script type="text/javascript" src="jquery-1.10.1.js"></script>

<script type="text/javascript">// <![CDATA[

$(function(){

                $('.xxk ul li').click(function(){

                        $(this).addClass('active').siblings().removeClass('active');

                        var index=$('.xxk ul li').index(this);

                       

                        $('li').not('active').find('div').stop().slideUp();

                        $('.xxk div').eq(index).slideDown();

                        })

               

               

        })

</p>

<p>写的效果出来了，新手，请各位大神多多指教小辈</p>

<div class="xxk">

<ul>

<li class="active">选项卡1

<div style="display: block;">选项卡1选项</div>

</li>

<li>选项卡2

<div>选项卡2选卡2选项卡2</div>

</li>

<li>选项卡3

<div>选项卡卡3</div>

</li>

<li>选项卡4

<div>选项卡4</div>

</li>

</ul>

</div>