菜单实现

最新推荐文章于 2024-09-20 16:06:21 发布
最新推荐文章于 2024-09-20 16:06:21 发布
阅读量391 收藏
点赞数
文章标签： function div class float xhtml safari
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq254331474/article/details/6386491
版权

<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="lnquiry.aspx.cs" Inherits="Web.Company.lnquiry" %>

 

<!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="../js/jquery-1.4.min.js" type="text/javascript"></script>

 

    <style type="text/css">

        body

        {

            font-size: 12px;

        }

        ul, li, h2

        {

            margin: 0;

            padding: 0;

        }

        ul

        {

            list-style: none;

        }

        #top

        {

            width: 900px;

            height: 40px;

            margin: 0 auto;

            background-color: #CCCC00;

        }

        #top h2

        {

            width: 150px;

            height: 40px;

            background-color: #99CC00;

            float: left;

            font-size: 14px;

            text-align: center;

            line-height: 40px;

        }

        #topTags

        {

            width: 750px;

            height: 40px;

            margin: 0 auto;

            background-color: #CCCC00;

            float: left;

        }

        #topTags ul li

        {

            float: left;

            width: 100px;

            height: 25px;

            margin-right: 5px;

            display: block;

            text-align: center;

            cursor: pointer;

            padding-top: 15px;

        }

        #main

        {

            width: 900px;

            height: 500px;

            margin: 0 auto;

            background-color: #F5F7E6;

        }

        #leftMenu

        {

            width: 150px;

            height: 500px;

            background-color: #009900;

            float: left;

        }

        #leftMenu ul

        {

            margin: 10px;

        }

        #leftMenu ul li

        {

            width: 130px;

            height: 30px;

            display: block;

            background: #99CC00;

            cursor: pointer;

            line-height: 30px;

            text-align: center;

            margin-bottom: 5px;

        }

        #leftMenu ul li a

        {

            color: #000000;

            text-decoration: none;

        }

        #content

        {

            width: 750px;

            height: 500px;

            float: left;

        }

        .content

        {

            width: 740px;

            height: 490px;

            display: none;

            padding: 5px;

            overflow-y: auto;

            line-height: 30px;

        }

        #footer

        {

            width: 900px;

            height: 30px;

            margin: 0 auto;

            background-color: #ccc;

            line-height: 30px;

            text-align: center;

        }

        .content1

        {

            width: 740px;

            height: 490px;

            display: block;

            padding: 5px;

            overflow-y: auto;

            line-height: 30px;

        }

    </style>

 

    <script type="text/javascript">

        window.onload = function() {

            function $(id) { return document.getElementById(id) }

            var menu = $("topTags").getElementsByTagName("ul")[0]; //顶部菜单容器

            var tags = menu.getElementsByTagName("li"); //顶部菜单

            var ck = $("leftMenu").getElementsByTagName("ul")[0].getElementsByTagName("li"); //左侧菜单

            var j;

            //点击左侧菜单增加新标签

            for (i = 0; i < ck.length; i++) {

                ck[i].onclick = function() {

                    $("welcome").style.display = "none"//欢迎内容隐藏

                    clearMenu();

                    this.style.background = "yellow";

                    //循环取得当前索引

                    for (j = 0; j < 8; j++) {

                        if (this == ck[j]) {

                            if ($("p" + j) == null) {

                                openNew(j, this.innerHTML); //设置标签显示文字

                            }

                            clearStyle();

                            $("p" + j).style.backgroundColor = "yellow";

                            clearContent();

                            $("c" + j).style.display = "block";

                        }

                    }

                    return false;

                }

            }

            //增加或删除标签

            function openNew(id, name) {

                var tagMenu = document.createElement("li");

                tagMenu.id = "p" + id;

                tagMenu.innerHTML = name + "&nbsp;&nbsp;&nbsp;" + "<img src='/files/allimg/080516/0150550.gif' style='vertical-align:middle'/>";

                //标签点击事件

                tagMenu.onclick = function(evt) {

                    clearMenu();

                    ck[id].style.background = "yellow";

                    clearStyle();

                    tagMenu.style.backgroundColor = "yellow";

                    clearContent();

                    $("c" + id).style.display = "block";

                }

                //标签内关闭图片点击事件

                tagMenu.getElementsByTagName("img")[0].onclick = function(evt) {

                    evt = (evt) ? evt : ((window.event) ? window.event : null);

                    if (evt.stopPropagation) { evt.stopPropagation() } //取消opera和Safari冒泡行为;

                    this.parentNode.parentNode.removeChild(tagMenu); //删除当前标签

                    var color = tagMenu.style.backgroundColor;

                    //设置如果关闭一个标签时，让最后一个标签得到焦点

                    if (color == "#ffff00" || color == "yellow") {//区别浏览器对颜色解释

                        if (tags.length - 1 >= 0) {

                            clearStyle();

                            tags[tags.length - 1].style.backgroundColor = "yellow";

                            clearContent();

                            var cc = tags[tags.length - 1].id.split("p");

                            $("c" + cc[1]).style.display = "block";

                            clearMenu();

                            ck[cc[1]].style.background = "yellow";

                        }

                        else {

                            clearContent();

                            clearMenu();

                            $("welcome").style.display = "block"

                        }

                    }

                }

                menu.appendChild(tagMenu);

            }

            //清除菜单样式

            function clearMenu() {

                for (i = 0; i < ck.length; i++) {

                    ck[i].style.background = "#99CC00";

                }

            }

            //清除标签样式

            function clearStyle() {

                for (i = 0; i < tags.length; i++) {

                    menu.getElementsByTagName("li")[i].style.backgroundColor = "#FFCC00";

                }

            }

            //清除内容

            function clearContent() {

                for (i = 0; i < 7; i++) {

                    $("c" + i).style.display = "none";

                }

            }

        }

    </script>

 

</head>

<body bgcolor="#FFFFFF" text="#000000">

    <div id="top">

        <h2>

            管理菜单</h2>

        <div id="topTags">

            <ul>

            </ul>

        </div>

    </div>

    <div id="main">

        <div id="leftMenu">

            <ul>

                <li>个人资料</li>

                <li>相册管理</li>

                <li>日志管理</li>

                <li>留言管理</li>

                <li>风格管理</li>

                <li>系统管理</li>

                <li>帮助信息</li>

            </ul>

        </div>

        <div id="content">

            <div id="welcome" class="content" style="display: block;">

                <div align="center">

                    <p>

                        &nbsp;</p>

                    <p>

                        <strong>欢迎使用用户管理系统！</strong></p>

                    <p>

                        &nbsp;</p>

                </div>

            </div>

            <div id="c0" class="content">

                个人资料</div>

            <div id="c1" class="content">

                相册管理</div>

            <div id="c2" class="content">

                日志管理</div>

            <div id="c3" class="content">

                留言管理</div>

            <div id="c4" class="content">

                风格管理</div>

            <div id="c5" class="content">

                系统管理</div>

            <div id="c6" class="content">

                帮助信息</div>

        </div>

    </div>

    <div id="footer">

        copyright for lalasxc

    </div>

    </form>

</body>

</html>

简单007
关注
自定义SAP 菜单实现
忍&拼
02-09 3417
一、背景介绍 在系统开发的过程中，随着实施的范围扩大或者项目本身的范围就比较大导致各个模块的事务代码很多，过多的事务代码用户很难逐一记忆。 解决这个问题可以通过权限设置中自动带出用户菜单，这样用户切换到自己的菜单时就可以看到自己权限下的事务代码。 还有一种方式就是自定义SAP 菜单，每个用户进入默认是SAP菜单，这样按照模块将事务代码分类部署在前台的SAP菜单中，方便用户使用。本文档介绍的即这种方法。 二、效果示例 三、操作步骤 1. 查看当前默认菜单 （1）事务代码 SSM..
jQuery实现的动态伸缩导航菜单实例
10-24
在介绍jQuery实现的动态伸缩导航菜单实例中，我们首先需要了解jQuery这个前端开发常用的JavaScript库。jQuery极大的简化了JavaScript编程，尤其在处理文档结构、事件处理、动画效果以及Ajax交互等方面提供了简便的...
一个简洁的管理菜单
paolei的笔记
05-16 1028
http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">http://www.w3.org/1999/xhtml">无标题文档body{font-size:12px;}ul,li,h2{margin:0;padding:0;}ul{list-style:none;}#top{width:900px;height:40px;margin:0
多级菜单
Vivian_shuang的博客
07-13 423
DOCTYPE html> html> head> meta charset="UTF-8"> title>title> style type="text/css"> * { margin: 0; padding: 0; } #ul1 { position: absolute; display: none; } ul { list-s
简易oled多级菜单实现
angelxiaolei的博客
03-11 6335
定义一个结构体，结构体里面应当有你想要怎样操作界面的变量等，一般包括：1.当前索引号 ，2.下一个，3.确定，4.当前执行函数的函数指针；
shiny分级菜单实现
大葱
04-14 4935
本文主要目的实现R shiny中的分级菜单选择地区A之后，再选择A地区的门店（下拉选项中只显示A地区门店）实现效果代码 global.R options(stringsAsFactors=FALSE, scipen=10, digits=4)library(dplyr)df_sample <- data.frame(region=rep(LETTERS[1:3], 4),
23 个 Web 侧边栏菜单实例
热门推荐
code小生
01-20 1万+
以下内容来自公众号逆锋起笔，关注每日干货及时送达来源：web前端开发今天，分享的内容是侧边栏练习案例，侧边栏是网页的一部分，可以轻松放置导航或显示链接 一些重要信息可帮助客户轻松找到。此外...
12864多级菜单实现,可方便实现无限级菜单
qq_35654286的博客
03-30 2732
运行效果 选择查询项 选择查询项并按确定键后 此时按返回键，将会返回到第二个图片中的界面，首先定义一个菜单结构 菜单程序 话不多说，直接贴代码！！！ typedef struct menu//定义一个菜单 { u8 range_from,range_to; //当前显示的项开始及结束序号 u8 itemCount;//项目总数 u8 selected;//当前选择项 u8 *menuItems[17];//菜单项目 struct menu **subMenus;//子菜单 struct menu *p
java实现多级菜单
小鲨鱼的博客
08-05 1286
return setResultSuccess("信息查询成功", menuTree);// 将菜单按照父菜单ID分组,放在menuMap中。* 根据父菜单节点逐级构建子树，按顺序排列。// 从根菜单开始，构建菜单树。//获取根菜单的子节点列表。
C# Winform动态菜单实现
qq_27474555的博客
10-25 1890
当一个平台支持多个产品时，有多个产品说明书，要在帮助菜单子菜单显示说明书名称，点击名称打开对应的说明书。 本例通过C# Winform动态菜单实现
12864多级菜单实现方法
weixin_43980908的博客
06-26 6779
前言        一般来说使用12864进行显示，配合按键作为人机界面交互，如果显示的内容较多的话，往往不能在一个页面显示完全，这里就需要用到多级菜单来进行管理，根据显示内容的不同，将其划分成不同的菜单，通过按键操作来选择不同的界面进行显示。这里介绍一种我自己使用的多级菜单实现原理和框架，并且分析一下其实现的方法，分享出来供大家参考。 一、菜单数据结构体 /************ 定义菜单列表结构体 **************/ t
jQuery网站导航下拉菜单实例
07-24
这个“jQuery网站导航下拉菜单实例”就是针对这一需求的实现方案。 jQuery，一个轻量级的JavaScript库，因其简洁易用的API而广受欢迎，被广泛用于网页交互和动态效果的实现。在这个实例中，我们将探讨如何利用...
C# 抽屉菜单实例(winform左侧导航菜单).rar
11-04
这个"C# 抽屉菜单实例"是一个针对WinForm应用的实现，它为用户提供了一种简洁、高效的方式来浏览和访问应用程序的不同功能模块。 首先，我们需要了解C# WinForm的基础。WinForm是.NET Framework中的一个Windows桌面...
纵向菜单实例.rar
03-26
这个"纵向菜单实例.rar"文件提供了一个使用JavaScript（JS）和层叠样式表（CSS）实现的垂直菜单示例，它具有悬浮效果和无限级别的联动功能。这种设计允许用户在导航时清晰地看到层次结构，使得网站内容的探索更加...
JS简单实现自定义右键菜单实例
10-19
### 知识点二：JavaScript实现自定义右键菜单原理 在JavaScript中，可以利用事件监听机制来捕捉用户的右键点击行为。当用户在页面上执行右键操作时，会触发contextmenu事件。此事件本质上是一个DOM事件，可以在事件...
XHTML学习
大河之犬的博客
09-20 303
XHTML是一个严格遵循 XML语法规则的 HTML 标准。它是 HTML4 的一种重构版本，结合了 HTML 的灵活性和 XML 的严格性，如今XHTML已经得到了所有主流浏览器的支持文档结构XHTML DOCTYPE 是强制性的中的 XML namespace 属性是强制性的、、 以及 也是强制性的元素语法XHTML 元素必须正确嵌套XHTML 元素必须始终关闭XHTML 元素必须小写XHTML 文档必须有一个根元素。
Safari-常用快捷键（IPadOS版本）
09-10 294
cmd+1 切换数字对应的的标签页 cmd+L 跳转到地址栏 cmd+f 页内搜索 cmd+r 重新载入当前页(刷新) cmd+d 当前页加入书签 cmd+ctrl+1/2/3 显示书签/阅读列表/浏览记录 cmd+t 新增标签页 cmd+w 关闭当前页(感谢csdn自动保存功能) cmd+“+/-” 放大/缩小页面 cmd+opt+b 左侧打开书签并进入编辑模式 cmd+shift+n 私密浏览模式 cmd+shift+L 左侧打开书签 cmd+shift+t 重新打开关闭的标签页
2024最新版手把手教你入门vue+springboot开发SpringBoot + vue 管理系统
09-22
2024最新版手把手教你入门vue+springboot开发SpringBoot + vue 管理系统2024最新版手把手教你入门vue+springboot开发SpringBoot + vue 管理系统2024最新版手把手教你入门vue+springboot开发SpringBoot + vue 管理系统2024最新版手把手教你入门vue+springboot开发SpringBoot + vue 管理系统2024最新版手把手教你入门vue+springboot开发SpringBoot + vue 管理系统2024最新版手把手教你入门vue+springboot开发SpringBoot + vue 管理系统2024最新版手把手教你入门vue+springboot开发SpringBoot + vue 管理系统2024最新版手把手教你入门vue+springboot开发SpringBoot + vue 管理系统2024最新版手把手教你入门vue+springboot开发SpringBoot + vue 管理系统2024最新版手把手教你入门vue+springboot开发SpringBoot
R语言学习记录_R-learning.zip
最新发布
09-22
R语言学习记录_R-learning
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值