仿微软导航效果,jquery

来源:互联网 发布:tomcat war 部署端口 编辑:程序博客网 时间:2024/06/08 06:14

<%@ Page Language="C#" AutoEventWireup="true" CodeFile="Default.aspx.cs" Inherits="_Default" %>

<!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>
    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js"></script>
    <style type="text/css">
.navgation{margin:0;padding:0;list-style-type:none;position:relative;}
.navgation li {float:left;}
.navgation a{padding:3px 6px;background-color:orange;color:white;text-decoration:none;float:left;height:24px;}
.navgation a:hover {background-color:white;color:blue;text-decoration:underline;}
.navgation div{display:none;position:absolute;top:30px;}
</style>
    <script type="text/javascript">//方法3
        $(document).ready(function () {
            $(".navgation input").each(function () {
                var this_div = $(".navgation div");
                var _inx = $(".navgation input").index(this);
               
                $(this).click(
                function () { this_div.eq(_inx).slideToggle(); },
                function () { this_div.eq(_inx).slideToggle(); }
           );
            });
        });
    </script>
</head>
<body>
    <form id="form1" runat="server">
    <div>
        <ul class="navgation">
            <%--<li><a href="#">链接1</a><div>
                这里放下拉内容1</div>
            </li>--%>
            <li><input type="button" id="button" value="链接1"/><div>
                这里放下拉内容1</div>
            </li>
            <li><input type="button" id="button1" value="链接2"/><div>
                这里放下拉内容2</div>
            </li>
            <li><input type="button" id="button2" value="链接3"/><div>
                这里放下拉内容3</div>
            </li>
            <li><input type="button" id="button3" value="链接4"/><div>
                这里放下拉内容4</div>
            </li>
            <li><input type="button" id="button4" value="链接5"/><div>
                这里放下拉内容5</div>
            </li>
        </ul>
    </div>
    </form>
</body>
</html>

原创粉丝点击