jquery实现未经美化的简洁拉环菜单效果

本文实例讲述了jquery实现未经美化的简洁拉环菜单效果。分享给大家供大家参考。具体如下：

这是一个看上去未经美化的简洁拉环选项卡，触发类的动作都是完整的，有兴趣的自己进行美化，美化漂亮了还是相当不错的，代码简洁，对学习参考比较不错，使用了jQuery插件。

运行效果截图如下：

在线演示地址如下：

http://演示。jb51。net/js/2015/jquery-show-tab-插件-样式-代码/

具体代码如下：

！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 ' hearteta http-equiv=' Content-Type ' Content=' text/html；charset=utf-8' /title未经美化的简洁TAB/title样式正文{ font : normal 12px/20px simsun；margin:0汽车划水：0;} * { margin : 0pxpadding : 0px } H4 { font-size :14 px；} H5 { font size :12 px；} img { border:none}ul，Li { list-style-type : none；} a { text-decoration : none} a :链接{ text-decoration : none} a :悬停{ text-decoration :下划线；color : # ffae 00 } # tab { width :240 pxmargin :0 auto文本对齐：居中；}.菜单{高：35px线高：32 px填充-top :1 px；}.菜单{ display : inline-block；高度：35px线高：35 px宽度宽度：116像素文本对齐：居中；font-size :20 pxcolor : # 999999 font-weight : bold；}.菜单悬停，a :{ color: # d33b55文本装饰：无；}.cnt{border:1px固体# 999999;宽度宽度：240像素高度：100 px}/style脚本类型=' text/JavaScript ' src=' http : jquery-1。6 .2 .量滴js '/script脚本类型=' text/JavaScript ' $(文档)。ready(function(){ $(')).菜单a ').每个（函数{ $(这个)).单击(函数(){ $(').菜单a ').removeClass('on ').方程式(I ).添加CLaSS(' on ')；$('.CNT ').隐藏()。方程式(I ).show()；返回false//防止a跳转；}) }) });/script/headdydiv id=' tab ' div class=' menu ' a href=' # ' class=' on ' ASP源码/a a href='#'Java源码/a /div div class='cnt' ul liASP源码1/li liASP源码2/li liASP源码3/Li/ul/div class=' CNT ' style=' display : none；ul liJava源码1/li liJava源码2/li liJava源码3/li /ul /div /div/body/html希望本文所述对大家的jquery程序设计有所帮助。