jquery实现超简洁的拉环选项卡效果代码

本文实例讲述了jquery实现超简洁的拉环选项卡效果代码。分享给大家供大家参考。具体如下：

这是一款超简洁的拉环选项卡，个人觉得有点太简单，简单的有点不习惯，美化修饰一下其实效果更好。实际上应该为点击过的拉环添加一个背景色，区分一下，这样比较好。

先来看看运行效果截图：

在线演示地址如下：

http://demo.jb51.net/js/2015/jquery-easy-tab-cha-menu-codes/

具体代码如下：

！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超简洁的拉环选项卡/title style body { 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: # ffae00}。菜单li { width:60px高度：30 px文本对齐：居中；线高：30 pxfloat:leftcursor:pointer指针指针；}.菜单li:hover .菜单li.on { color: # f00}。续{宽度：180像素高度：100 pxborder:1px固体# 666666;clear:both}/style脚本类型=' text/JavaScript ' src=' http : jquery-1。6 .2 .量滴js '/script脚本类型=' text/JavaScript ' $(文档)。ready(function(){ $(')).菜单李' .单击(function(){ var Num=$(this)).索引(“李”)；$('.菜单李' .removeClass('on ').eq(Num).添加CLaSS(' on ')；$('.(续).隐藏()。eq(Num).show()；});});/script/head dydiv class=' tab ' ul class=' menu ' Li class=' on '北欧之旅/li li音乐维也纳/li li天堂瑞士/li /ul div class='cont '北欧之旅/div class=' cont ' style=' display : none；'音乐维也纳/div class=' cont ' style=' display : none；'天堂瑞士/div/div/body/html希望本文所述对大家的jquery程序设计有所帮助。