JQuery学习4——标签页效果一

来源：互联网发布：共享单车盈利模式知乎编辑：程序博客网时间：2024/05/16 15:31

按照惯例，我们还是先来看一下最终要达到效果图：

和上一个菜单效果类似，当鼠标移动到标签上的时候，下面会显示相应的内容。当然，同样存在滑动门的问题。

前台页面的代码：

<%@ 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></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>

tab.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;    }

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);        });    });});