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

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

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

前台页面的代码：

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

yjjm1990

发布了138 篇原创文章 · 获赞 11 · 访问量 40万+

他的留言板关注

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

猜你喜欢