jquery tab标签页效果一例
发布时间：2015-10-09 编辑：jiaochengji.com
标签页的思路：当鼠标在标签上时下面div会显示和标签相对应的内容，随着标签的改变，下面的div也会对应改变内容。本文为大家提供一个jquery tab 标签页的效果，供大家参考。
在制作jqeury 标签页时，要注意，标签的mouseover事件设置延迟，防止用户恶意的移动鼠标导致放送大量的请求而导致服务器崩溃，需要用到setTimeout函数，主要是以下的事件：
1、$().each(function(){}) //遍历所有标签的好办法
2、mouseover事件，
另外，要注意css样式的编写，不然会样式错乱的哦。
好了，开始今天的jquery 教程吧。
1、前台页面
2、css代码
ul ,li { margin:0px; padding:0px; list-style:none; } li { float:left; background-color:#66CC00; margin-right:2px; //这个是设置标签之间的间距 padding:5px; border:1px solid white; height:20px; color:white; } .listli { background-color:#663333; border:1px solid #663333; } div { clear:left; width:300px; height:100px; background-color:#663333; border-top:0px; color:white; display:none; } .divarea { display:block; }3、控制滑动的js
//定义全局变量 var timeout; $(document).ready(function(){ //找到所有的li标签 $("li").each(function(index){ $(this).mouseover(function(){ //滑动门都要设置一个延迟时间，避免用户疯狂移动鼠标，导致服务器崩溃，这个很重要 timeout =setTimeout(function(){ $("div.divarea").removeClass("divarea"); $("li.listli").removeClass("listli"); // $("div").eq(index).addClass("divarea"); //另一种写法是:$(div:eq(index)).addClass("divarea"); $("div:eq("+index+")").addClass("divarea"); $("li").eq(index).addClass("listli"); }, 320); $(this).mouseout(function(){ clearTimeout(timeout); }); }); }); });好了，以上全部完成后，一个漂亮的jquery tab标签页效果就完成了。
脚本学堂，祝大家学习进步。
您可能感兴趣的文章：
jquery Tab效果和动态加载的简单实例
jquery tab标签页效果一例
通过jquery实现tab标签浏览效果
jquery标签页效果一例
用jQuery打造TabPanel效果代码
纯CSS实现Tab页切换效果
jquery ui tabs获取选中的实现代码
DIY jquery plugin - tabs标签切换实现代码
基于JQuery的多标签实现代码
jQuery标签页插件 jerichoTab
[关闭]