简简单单的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：
