tab选项卡在网上是很常见的一种效果 网站当中随处可见 特别是大型网站到处都是，但是写tab这种效果 用的方式可能不一样 有的是YUI写的 用的是用KISSY写的 有的是用原审js写的 也有的是以Jquery框架写的 但是我这里是用Jquery来封装tab选项卡的 在js中我用了Jquery中的children()这个方法 获取父类中直接子元素，记住一定是直接子元素 假入说要获取子元素的div当中的a标签 比如这样获取 $("父类").children("div a");想获取a标签是获取不到的 只能获取到div标签！！我以前做页面时候就碰到过这种情况！OK 其实用Jquery来封装tab选项卡是非常简单的一件事情！只要几行代码 就ok了！下面是我的HTML结构及CSS

<styletype="text/css">ul,li,div{margin:0;padding:0;} ul,li{list-style:none;} .tabWrap{width:450px;margin:0auto50px;overflow:hidden;} .tab{background:#F93;overflow:hidden;width:450px;} .tabli{float:left;width:150px;color:#fff;text-align:center;cursor:pointer;height:22px;line-height:22px;} .tabli.on{background:#F60;} .tabContent.p-content{padding:20px;border:1pxsolid#ddd;border-top:0none;} .tabContent.hide{display:none;} </style><scripttype="text/javascript"src="http://ajax.googleapis.com/ajax/libs/jquery/1.5.1/jquery.min.js"></script></head><body><divclass="tabWrap"><ulclass="tab"><li>选项卡1</li><li>选项卡2</li><li>选项卡3</li></ul><divclass="tabContent"><divclass="p-content">1111</div><divclass="p-contenthide">222</div><divclass="p-contenthide">3333</div></div></div> <br/><br/><divclass="tabWrap"><ulclass="tab"><li>选项卡1</li><li>选项卡2</li><li>选项卡3</li></ul><divclass="tabContent"><divclass="p-content">1111</div><divclass="p-contenthide">222</div><divclass="p-contenthide">3333</div></div></div>

我这边HTML是用了两个一样的结构及样式 是为了测试js在一个页面上多次调用是否成功！JS代码如下：

<scripttype="text/javascript"> $(function(){ functiontabs(tabMenu,on,tabContent){ $(tabContent).each(function(){ $(this).children().eq(0).show(); }); $(tabMenu).each(function(){ $(this).children().eq(0).addClass(on); }); $(tabMenu).children().hover(function(){ $(this).addClass(on).siblings().removeClass(on); varindex=$(tabMenu).children().index(this); $(tabContent).children().eq(index).show().siblings().hide(); }); } tabs(".tab","on",".tabContent"); }) </script>

引用上面的js就可以了！为了更清晰 待会把源文件放在附件里面 随时可以下载看看！下面说说写这个页面的js一点思路！

一 function tabs(tabMenu,on,tabContent){} 用这个函数来封装js 调用的方式是tabs(".tab","on",".tabContent"),其中tabMenu是指li外层ul on是指当鼠标移上去li 希望他有个背景 tabContent 是指content的外层！

二 接着用each来遍历 找到第一个子元素li增加一个类on 第一个content让她们显示！接着当鼠标移到任何一个li时候 让当前的li增加一个类on 同辈元素删除类on 然后索引当前的li 看是第几个 最后找出content 如果他的索引值和li的索引值相同的话 显示内容 同辈元素隐藏掉！思路就这么简单！！！！

附件：http://down.51cto.com/data/2359275