jQuery实现简单的标签标签页效果

本文实例讲述了jQuery实现简单的标签标签页效果。分享给大家供大家参考，具体如下：

！doctype html html lang=' en ' hearta charset=' UTF-8 ' title tab 1/title style type=' text/CSS ' * { padd : 0；保证金： 0；}李{列表式-类型：无；}车身{ margin: 50px}。隐藏{ display:无}。tabTitle ul{ overflow:隐藏；_ height:1px}。tabTitle ul li{左侧浮动：border: 1px实心# abcdefborder-bottom:无；高度： 30px线高： 30pxpadding: 0 15px右边距： 3px光标：指针指针；}.当前{ background : # abcdefcolor : # fff }。选项卡内容div {边框： 1px实心# f60宽度： 300像素；高度： 250像素；padd : 15px }/样式/头模！-这里是标签标题-div class=' TabTitle ' ul Li class=' current ' XHTML/Li Li LICs/Li Li jquery/Li/ul/div class=' TabContent ' divXHTML的内容/div类=隐藏CSS的内容/div div class='hide'jquery的内容/div/div脚本src=' http : jquery-1。7 .2 .量滴js '/script脚本类型=' text/JavaScript ' $(function(){ var Ali=$(')).标签标题ul Li '；var aDiv=$(' .选项卡内容div’)；var timeId=nullAli。鼠标悬停在(function(){ var _ this=$(this)上；//setTimeout()；的作用是延迟某一段代码的执行timeId=setTimeout(函数(){ //$(这个)方法属于哪个元素，$(这个)就是指哪个元素_this.addClass('当前').兄弟姐妹()。removeClass(“”当前');//如果想用一组元素控制另一组元素的显示或者隐藏，需要用到索引var index=_ this。index()；aDiv.eq(指数)。显示()。兄弟姐妹()。hide()；},300);}).mouseout(函数(){ //clearTimeout)的作用是清除定时器clear TiME out(TiME id)；});});/脚本/正文/html运行效果图如下：

更多关于jQuery相关内容感兴趣的读者可查看本站专题： 《jQuery切换特效与技巧总结》 、 《jQuery扩展技巧总结》 、 《jQuery常用插件及用法总结》 、 《jQuery拖拽特效与技巧总结》 、 《jQuery表格(table)操作技巧汇总》 、 《jquery中Ajax用法总结》 、 《jQuery常见经典特效汇总》 、 《jQuery动画与特效用法总结》 及《jquery选择器用法总结》

希望本文所述对大家jQuery程序设计有所帮助。