jQuery css实现非常漂亮的水平导航菜单效果

本文实例讲述了jQuery css实现非常漂亮的水平导航菜单效果。分享给大家供大家参考，具体如下：

运行效果截图如下：

用到的背景图片tab.gif如下：

具体代码如下：

！DOCTYPE html PUBLIC '-//W3C//DTD XHTML 1.0 Transitional//EN ' ' http://www .w3。org/TR/XHTML 1/DTD/XHTML 1-Transitional。DTD ' html xmlns=' http://www .w3。org/1999/XHTML ' head runat=' server ' title jquery CSS水平导航菜单/title脚本src=' http : jquery-1。7 .2 .量滴js ' type=' text/JavaScript '/script script type=' text/JavaScript ' $(function(){ $(' ulli ')).单击(函数(){ $('ulli ')).每个（函数(){ $(此)).移除CLaSS(' _ Li show ')；});$(这个)。addCLaSS(' _ Li show ')；});});/script style type=' text/CSS ' ul { list-style-type : none；border: 0px蓝色固体；高度： 27px宽度： 480像素；} ul Li { list-style-type : none；向左浮动：宽度： 74px高度： 27px线高： 27px文本对齐：中心；背景-颜色： # CCCCFF背景：网址(./images/选项卡。gif)；背景-位置：-74px 0px；}ul li:hover{ cursor:指针；}._lishow{ background: url(./images/选项卡。gif)；背景-位置0px 0px }/style/head dy div ul Li class=' _ Li show ' Menu 1/Li lime nu 2/Li lime nu 3/Li lime nu 4/Li lime nu 5/Li lime nu 6/Li/ul br//div/body/html更多关于jQuery相关内容感兴趣的读者可查看本站专题： 《jQuery form操作技巧汇总》 、 《jQuery常用插件及用法总结》 、 《jQuery操作json数据技巧汇总》 、 《jQuery扩展技巧总结》 、 《jQuery拖拽特效与技巧总结》 、 《jQuery表格(table)操作技巧汇总》 、 《jquery中Ajax用法总结》 、 《jQuery常见经典特效汇总》 、 《jQuery动画与特效用法总结》 及《jquery选择器用法总结》

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