jquery标签页效果一例
发布时间：2015-10-09 编辑：jiaochengji.com
为大家提供一个jquery实现的标签页效果，当鼠标移动到标签上时，下面会显示相应的内容，供大家学习参考吧。
1、效果如下图：
2前台页面
<%@ Page Language="C#" AutoEventWireup="true" CodeFile="tab.aspx.cs" Inherits="tab" %> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head runat="server"> <title>jquery标签页效果_脚本学堂_www.jbxue.com</title> <link href="css/tab.css" rel="stylesheet" type="text/css" /> <script src="js/jquery-1.9.1.min.js" type="text/javascript"></script> <script src="js/tab.js" type="text/javascript"></script> </head> <body> <form id="form1" runat="server"> <div id="firstDiv"> <ul> <li class="tabin">标签一</li> <li>标签二</li> <li>标签三</li> </ul> <div class="contentin"> 我是标签一的内容</div> <div> 我是标签二的内容</div> <div> 我是标签三的内容</div> </div> </form> </body> </html>3、css样式表
ul,li { list-style:none; margin:0; padding:0; } li { background-color:#6E6E6E; float:left; color:White; padding:5px; margin-right:3px; border: 1px solid white; } .tabin { border:1px solid #6E6E6E; } #firstDiv div { clear:left; background-color:#6E6E6E; width:200px; height:100px; display:none; } #firstDiv .contentin { display:block; }4、js代码 tab.js
/// <reference path="jquery-1.9.1.min.js" /> $(document).ready(function () { var setTimeouId; $("#firstDiv li").each(function (index) { $(this).mouseover(function () { var nodeTabin = $(this); setTimeouId = setTimeout(function () { $("#firstDiv .contentin").removeClass("contentin"); $("#firstDiv .tabin").removeClass("tabin"); $("#firstDiv div").eq(index).addClass("contentin"); //不应该再用this this如果用在这里是指window，切记 nodeTabin.addClass("tabin"); }, 300); }).mouseout(function () { clearTimeout(setTimeouId); }); }); });您可能感兴趣的文章：
jquery标签页效果一例
jquery标签页效果示例代码
jQuery圆角插件 jQuery Corners
jquery tab标签页效果一例
js与css 标签页效果的代码分享(图文)
基于JQuery的多标签实现代码
html5 details标签的作用是什么？<details>标签的使用方法介绍(附使用实例)
html5 header标签是什么意思？html5 header标签的用法详解（附实例）
有关jquery一些选择器的用法小结
基于jQuery的表格操作插件
[关闭]