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>

    效果:

  • 相关阅读:
    Spring bean的循环依赖以及解决方式
    在Java中为什么实现了Cloneable接口,就能调用Object的clone方法?
    Java-Objects类-deepEquals()和equals()详解
    Linux TCP状态TIME_WAIT 过多的处理
    mysql字符串区分大小写的问题
    java 类加载
    java native 理解
    Maven配置阿里镜像仓库
    Cannot find name ‘XX‘. Do you need to change your target library? Try changing the `lib` compiler
    Typescript Interfaces(接口)添加任意key值/内容
  • 原文地址:https://www.cnblogs.com/zhanjun/p/2792352.html
Copyright © 2011-2022 走看看