jQuery实现制表符切换效果的简单演示

文中给出了一个jQuery Tab切换效果的简单演示，完全是我自己的思考和实现过程，想和大家分享一下，供大家参考。具体如下：

起初，我的Html代码架是这样的：

Div=' tabs ' ul Li class=' acss '数据框=' # panel-1 '选项卡1/Li Li class=' bcss '数据框=' # panel-2 '选项卡2/Li Li class=' bcss '数据框=' # panel-3 '选项卡3/li/。ul div id=' panel-1 ' content 111111/div div id=' panel-2 ' style=' display : none；'222222/div div id=' panel-3 ' style=' display : none；'内容333333/div/div后来被以下内容取代：

dl class=' tab ' dt a class=' acss ' href=' # panel-1 '选项卡1/a class=' bcss ' href=' # panel-2 '选项卡2/a class=' bcss ' href=' # panel-3 '选项卡3/a/dt DD id='。2/DD DD id=' panel-3 ' style=' display : none；之所以把content/DD/dl改成这个，是因为我觉得dl dt dd在页面布局中的使用比div ul li少，可以达到更好的隔离。当我们使用js操作dl dt dd对象时，对页面中其他元素的影响会小一些，不需要在li标签中自定义data-box属性，更符合页面编写标准。而且这个结构的整体感觉比上面那个要好。插件实现代码如下：

(函数($) {$。fn . tab=function(options){//默认参数设置为varsettings={ before CSS : ' bcss '，//激活前css:' acss '后的样式名，//激活后的样式名为model 3360 ' mouse over '/Switch mode('。//不为空，则合并参数if (options) $。扩展(设置，选项)；//获取一个标记集var arr_a=$(' dt a '，this)；//绑定事件arr _ a.each()函数(){$ (this)。绑定(设置。模型、函数(事件){//去掉标记A的锚点，跳转到event . preventdefault()；//样式控件$ (this)。removeclass()。addclass(设置。aftercss)。兄弟姐妹(' a ')。removeclass()。addclass(设置。before CSS)；//隐藏和显示控件var dd_id=$(this)。attr(' href ')；$(dd_id)。显示()。兄弟姐妹(' dd ')。hide()；});});//遵循返回this.each(function () {})的链式原则；};})(jQuery)；之所以轻量级，是因为代码量真的很小很简单。相信大家有评论都能看懂。

设置中的型号用于控制切换模式：

当它是“点击”时，点击切换；当“鼠标悬停”时，鼠标滑入进行切换。起初，我想用悬停来切换鼠标。结果，我发现hover不支持绑定绑定。Hover是jquery封装mouseover事件的产物，它不是一个可信的事件，所以不能绑定。以下是演示：

！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 title/title style=' text/CSS ' * { margin 3360；padd : 0；} .选项卡{ width : 504 pxmargin : 50px自动；} .acss .bcss {装潢：无；线高： 35pxfont-size : 14pxpadding:8px 15px }。bcss {底色： # D4D4D 4；边框-底部：1px纯白色；} .acss {底色-颜色：橙色；边框-底部：1px纯橙色；} .制表符DD { width : 500 px h8 : 300 pxborder : 1px纯橙色；文本对齐：中心；线高： 300像素；}/style/head body dl class=' tab ' id=' tab S1 ' dt a class=' acss ' href=' # panel-1 '标签1/a a class='bcss' href='#panel-2 '标签2/a a class='bcss' href='#panel-3 '标签3/a /dt dd id='panel-1'h1鼠标滑入切换/h1/DD DD DD id=' panel-2 ' style=' display : none；'内容2/DD DD id=' panel-3 ' style=' display : none；'内容3/DD/dl class=' tab ' id=' tab S2 ' dt a class=' acss ' href=' # panel-4 '标签1/a！-默认第一个激活- a class='bcss' href='#panel-5 '标签2/a a class='bcss' href='#panel-6 '标签3/a /dt dd id='panel-4'h1鼠标点击切换/h1/dd！-默认第一个显示-DD id=' panel-5 ' style=' display : none；'内容2/DD DD ID=' panel-6 ' style=' display : none；'内容3/dd /dl脚本src='http:/js/jquery-1。4 .1 .量滴js ' type=' text/JavaScript '/script script src=' http :/js/jquery。类似的。选项卡。js ' type=' text/JavaScript '/script script type=' text/JavaScript ' $(' # tab S1 ').制表符();//默认鼠标滑入切换$('#tabs2 ').选项卡({ model : ' click ' })；//设置为点击切换/脚本/正文/html效果图如下：

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