jQuery：简单6行代码实现tab效果

简简单单的6行代码实现tab滑动门效果：如下

HTML:

<div class="tabs">    <!-- 默认第一个tab为激活状态 -->        <h3 class="active"><span>热点新闻</span></h3>        <div id="tab-01">news</div>    <h3><span>娱乐新闻</span></h3>        <div id="tab-02">enteriment</div>        <h3><span>就业形势</span></h3>        <div id="tab-03">jobs</div>    </div>

CSS:

  * { margin:0; padding:0;}    body { font:12px Verdana, Geneva, sans-serif; color:#404040;} .tabs { margin:10px 0 0 20px; 360px; position:relative; overflow:hidden; height:1%; height:140px;}.tabs h3 { z-index:2; font-size:12px; background:url(pic.gif) no-repeat; 95px; height:25px; line-height:25px; text-align:center; float:left; margin-right:5px;}h3.active { background-position:0 -25px; color:#fff;}#tab-01, #tab-02, #tab-03 { position:absolute; top:24px; left:0; 338px; padding:10px; height:93px; border:1px solid #ace; z-index:1;}#tab-02, #tab-03 { display:none;}

JQUERY:

 $(document).ready(function() {$('.tabs h3').mouseover(function() {$('.tabs div').hide();$(this).siblings('h3').removeClass('active').end()  .addClass('active').next('div').show();});    });

SHOW：