jquery tab标签页的制作

这里有一个内容要特别注意的那就是给标签的mouseover事件设置延迟，这样防止用户恶意的移动鼠标导致放送大量的请求而是服务器崩溃，用到setTimeout函数，主要用到已下的事件

1 $().each(function(){}) 这个是个非常重要的遍历所有标签的好办法

2 mouseover事件，

还有就是关键的css样式编写，控制显示的样式，


代码如下:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<HTML>
<HEAD>
<TITLE>tab </TITLE>
<link rel="stylesheet" type="text/css" href="css/tab.css">
<script type="text/javascript" src="js/jquery-1.4.2.js"></script>
<script type="text/javascript" src="js/tab.js"></script>
</HEAD>

<BODY>
<ul id="ularea">
<li class="listli">标签1</li>
<li >标签2</li>
<li >标签3</li>
</ul>
<div class="divarea">内容1</div>
<div>内容2</div>
<div>内容3</div>
</BODY>
</HTML>

接下来就是控制样式的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; }

下来就是编写控制滑动的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);
});
});
});
});

赞 (0)

相关推荐

  • jQuery实现简单的tab标签页效果

    jQuery实现简单的tab标签页效果

    本文实例讲述了jQuery实现简单的tab标签页效果.分享给大家供大家参考,具体如下: <!doctype html> <html lang="en"> <head> <meta charset="UTF-8"> <title>tab1</title> <style type="text/css"> *{ padding: 0; margin: 0;} li{ l

  • JQuery标签页效果的两个实例讲解（4）

    JQuery标签页效果的两个实例讲解（4）

    按照惯例,我们还是先来看一下最终要达到效果图: 和上一个菜单效果类似,当鼠标移动到标签上的时候,下面会显示相应的内容.当然,同样存在滑动门的问题.  前台页面的代码: <%@ Page Language="C#" AutoEventWireup="true" CodeFile="tab.aspx.cs" Inherits="tab" %> <!DOCTYPE html PUBLIC "-//W3C/

  • js与jquery分别实现tab标签页功能的方法

    本文实例讲述了js与jquery分别实现tab标签页功能的方法.分享给大家供大家参考,具体如下: 首先列出样式和html标签 <style type="text/css"> *{margin: 0;padding: 0;} #myul li {list-style: none; float: left; border: 1px solid #ddd; width: 100px; height: 20px; text-align: center; line-height: 2

  • jQuery EasyUI 布局之动态添加tabs标签页

    jQuery EasyUI 布局之动态添加tabs标签页

    在没看下文之前先给大家简单介绍easyui相关知识. easyui是一种基于jQuery的用户界面插件集合.ddd easyui为创建现代化,互动,JavaScript应用程序,提供必要的功能. 使用easyui你不需要写很多代码,你只需要通过编写一些简单HTML标记,就可以定义用户界面. easyui是个完美支持HTML5网页的完整框架. easyui节省您网页开发的时间和规模. easyui很简单但功能强大的. 通过使用 jQuery EasyUI 可以很容易地添加 Tabs.您只需要调用

  • JS实现标签页效果(配合css)

    JS实现标签页效果(配合css)

    实现的效果: 如上图所示为制作的标签页,我们想要实现的效果是当鼠标移到某一个标签的时候,在下面的内容区显示对应的内容,并且相应标签的颜色需要改变,如图中所示当前鼠标的位置在"标签1"上,则内容区域显示的内容为"我是内容1",并且"标签1"的颜色要比"标签2"和"标签3"深一些,同样鼠标移到"标签2"和"标签3"的时候显示"我是内容2"和"

  • JQuery标签页效果实例详解

    JQuery标签页效果实例详解

    本文实例讲述了JQuery标签页效果实现方法.分享给大家供大家参考,具体如下: 第一个标签页中鼠标滑过显示不同的标签页,第二个标签页中点击不同标签加载其他页面中的内容,加载等待的图片缓慢隐藏,效果图如下: /WebRoot/4.Tab.html: <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> &l

  • jQuery EasyUI API 中文文档 - Tabs标签页/选项卡

    jQuery EasyUI API 中文文档 - Tabs标签页/选项卡

    Tabs 标签页/选项卡 用$.fn.tabs.defaults重写defaults. 依赖 panel linkbutton 用法示例 创建tabs 1. 经由标记创建Tabs 从标记创建Tabs更容易,我们不需要写任何JavaScript代码.记住把 'easyui-tabs' 类添加到<div/>标记,每个tab panel 经由子<div/>标记被创建,其用法与Panel一样. 复制代码 代码如下: <div id="tt" class="

  • 基于jQuery实现多标签页切换的效果(web前端开发)

    基于jQuery实现多标签页切换的效果(web前端开发)

    这里,实现多标签页效果的方法有两个,一个是基于DOM的,另一个是基于jquery的,此次我写的是一个对于一个电话套餐的不同,显示不同的标签页 方法一: 首先,我们要把页面的大体框架和样式写出来,html和css代码如下: <ul id="tab"> <li id="tab1" onclick="show(1)">10元套餐</li> <li id="tab2" onclick=&quo

  • jQuery实现标签页效果实战（4）

    jQuery实现标签页效果实战（4）

    今天我们来完成<jQuery实战>系列的标签页效果.先来看一看效果图 这里有两部分的内容,上面是一个标签页的效果,下面也是一个标签页的效果.在实际应用中也经常会见到标签页的效果,它的作用主要是在页面可视区有限的情况下展示更多的内容.当用户想看其他内容的时候不需要离开页面,只需要把鼠标移动到某一个标签上就可以看到这个标签里面所对应的内容.门户网站的首页,有很多频道都是标签页的最佳案例,如体育.财经.军事等模块都是位于不同的标签上.上边的标签页一般称为滑动门技术,下面的内容是一次性加载进来,鼠标移

  • 一个js随机颜色脚本（用于标签页面，也可用于任何页面）

    看见有人要这个东西,发上来.237个字节的东西.很小吧? 把下面代码添加到tag.asp的<div id="mainContent-bottomimg">前面即可. 这么简单的问题就别问什么问题了. 其实你也可以添加到header.asp或footer.asp中.不过这样你整个页面的全部span区域将全为随机颜色了. 演示 http://www.hljsh.com/tag.asp 效果是一样的.不过我的演示是用asp实现的.我发的是用JS实现的.效果一样. 复制代码 代码如

随机推荐