zoukankan      html  css  js  c++  java
  • jquery学习菜单

    <%@ Page Language="C#" AutoEventWireup="true" CodeBehind="menu.aspx.cs" Inherits="jquerydemo.menu" %>

    <!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 src="jquery-1.4.2.js" type="text/javascript"></script>
        <style type="text/css">
            #menu
            {
                100px;
            }
            .has_children
            {
                background: #555;
                color: #fff;
                cursor:pointer;
            }
            .highlight
            {
                color: #fff;
                background: green;
            }
            div
            {
                padding:0px;
                margin:10px 0px;
            }
            div a
            {
                display: none;
                background: #888;
                float:left;
                100px;
            }
        </style>
    </head>
    <body>
        <form id="form1" runat="server">
        <div id="menu">
            <div class="has_children">
                <span>企业</span> <a href="www.baidu.com">0</a> <a>9</a> <a>8</a>
            </div>
            <div class="has_children">
                <span>产品</span> <a>1</a> <a>2</a> <a>3</a>
            </div>
            <div class="has_children">
                <span>公司</span> <a>4</a> <a>5</a> <a>6</a>
            </div>
        </div>
        <script type="text/javascript">
            $(".has_children").click(function () {
                $(this).addClass("highlight").children("a").show().end().siblings().removeClass("highlight").children("a").hide();
            });
        </script>
        </form>
    </body>
    </html>

    效果:

  • 相关阅读:
    Djnago中缓存配置(redis配置案例)
    HDU-4717 The Moving Points 三分
    HDU-4716 A Computer Graphics Problem 水题
    HDU-2686 Matrix 多进程DP
    [转]手动开平方的简易方法
    [转]树链剖分
    HUOJ-10857 最大的面积 凸包+DP
    Bnuoj-29359 Deal with numbers 线段树
    HDU-4283 You Are the One 区间DP
    BNUOJ-26586 Simon the Spider 最小生成树+枚举
  • 原文地址:https://www.cnblogs.com/zhanjun/p/2792352.html
Copyright © 2011-2022 走看看