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>

    效果:

  • 相关阅读:
    js克隆
    一些笔试题
    js的严谨模式
    Docker之Compose服务编排
    最近5年183个Java面试问题列表及答案[最全]
    Rancher概述
    迭代器和生成器
    Prometheus 安装
    Prometheus 介绍
    装饰器函数
  • 原文地址:https://www.cnblogs.com/zhanjun/p/2792352.html
Copyright © 2011-2022 走看看