几行简单的jQuery代码搞定tab标签切换效果

以前收藏过tab标签的实现方法，使用jQuery方法同样简单。

示例css：

*{ margin:0; padding:0;list-style: none;}
body {font:12px/1.5 Tahoma;}
#outer {width:450px;margin:150px auto;}
#tab {overflow:hidden;zoom:1;background:#000;border:1px solid #000;}
#tab li {float:left;color:#fff;height:30px; cursor:pointer; line-height:30px;padding:0 20px;}
#tab li.current {color:#000;background:#ccc;}
#content {border:1px solid #000;border-top-width:0;}
#content ul {line-height:25px;display:none; margin:0 30px;padding:10px 0;}

html部分：

<ul id="tab">
 <li class="current">WordPress</li>
 <li>JavaScript</li>
 <li>css3</li>
 </ul>
 <div id="content">
 <ul style="display:block;">
 <a href="https://pdbn.top/category/nxdm/wp-notes/">WordPress笔记</a>
 </ul>
 <ul>
 <a href="https://pdbn.top/category/nxdm/js-notes/">JavaScript笔记</a>
 </ul>
 <ul>
 <a href="https://pdbn.top/category/nxdm/divcss-notes/">divcss笔记</a>
 </ul>
 </div>

js部分：

$(function(){
 window.onload = function()
 {
 var $li = $('#tab li');
 var $ul = $('#content ul');

 $li.mouseover(function(){
 var $this = $(this);
 var $t = $this.index();
 $li.removeClass();
 $this.addClass('current');
 $ul.css('display','none');
 $ul.eq($t).css('display','block');
 })
 }
 });

预览：

[runcode]< !doctype html>

[/runcode]