<!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>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
<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+" "+"<img src='off.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>
<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> </p>
<p><strong>欢迎光临</strong></p>
<p> </p>
</div>
</div>
<div id="c0" class="content"><a href="###">导航一内容</a></div>
<div id="c1" class="content"><a href="###">导航二内容</a></div>
<div id="c2" class="content"><a href="###">导航三内容</a></div>
<div id="c3" class="content"><a href="###">导航四内容</a></div>
<div id="c4" class="content"><a href="###">导航五内容</a></div>
<div id="c5" class="content"><a href="###">导航六内容</a></div>
<div id="c6" class="content"><a href="###">导航七内容</a></div>
</div>
</div>
<div id="footer">copyright for onestopweb </div>
</body>
</html>
效果图：
相关推荐
尤其是对于后台菜单，Bootstrap的导航条和下拉菜单组件可以轻松实现二级或多级菜单结构，方便用户导航。 具体到“管理平台模板”，这通常是指一个预先设计好的后台管理界面结构，包括了必要的页面布局、导航元素、...
在构建后台管理菜单时，Bootstrap的网格系统、CSS样式和JavaScript插件是核心元素。首先，网格系统用于布局和排版，使得菜单可以在不同屏幕尺寸下自适应，确保在桌面和移动设备上的良好显示。这通常通过使用预定义的...
"JS后台管理树形菜单代码.rar" 是一个包含JavaScript实现的树形菜单插件，适用于后台管理场景。这个压缩包提供了实现这种功能的代码示例，帮助开发者快速构建出美观且高效的树状菜单。 首先，我们来详细了解一下...
在本项目中，我们主要探讨的是如何利用Vue3框架与Element-Plus库来构建一个后台管理系统，特别是关于菜单管理的部分。Vue3是Vue.js的最新版本，它带来了许多性能优化和开发体验提升的新特性，如Composition API、...
标题提到的“一个特别好的后台管理菜单”，显然是指设计精良、功能完善的菜单系统，它可能具备了树形结构、菜单项前缀图标等特性，这些都是现代后台管理系统中常见的优秀设计元素。 首先，让我们详细了解一下树形...
标题 "后台管理左侧菜单树Js+TreeView" 指的是在Web应用的后台管理系统中，用于展示层次结构的菜单的一种实现方式。这种实现通常利用JavaScript（Js）动态生成和操作DOM，结合TreeView控件，为用户提供直观易用的...
"后台管理的简单菜单栏"这个主题聚焦于后台界面中的一个重要元素——菜单栏，它是用户与系统交互的主要途径之一。菜单栏的设计直接影响到系统的易用性和操作效率。 源码在软件开发中扮演着关键角色，它可以让我们...
本文将详细介绍如何使用Vue.js实现后台管理权限系统以及顶栏三级菜单的显示功能。 首先，我们要理解权限路由的思路。这个过程涉及到根据用户的角色（roles）信息来过滤出他们可以访问的路由。具体步骤如下： 1. **...
某cms系统的后台管理菜单 左侧展开、折叠的菜单，绝对 是看上去即小巧美观又专业实用的后台管理菜单，那些小图标的加入让本款菜单看上去更秀气了，菜单基于CSS和JS结合共同实现，可点击主菜单标题栏展开、关闭二级子...
总的来说，"后台JS菜单树源码"提供了一种用JavaScript实现的后台菜单管理方案，它利用了树形数据结构的优势，结合JS的动态特性，为后台管理系统带来了直观、易用的菜单展示。配合详细的说明文档，无论是初学者还是有...
本篇文章将详细探讨如何利用 `dtree` 生成后台管理菜单模板，并结合 JavaScript 和 HTML 技术实现纯前端的解决方案。 首先，我们需要理解 `dtree` 插件的基本概念。`dtree` 是一个基于 JavaScript 的树形控件，它...
本文实例讲述了JS实现可编辑的后台管理菜单功能。分享给大家供大家参考，具体如下： <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" ...
【标题】：“后台管理系统菜单 左侧折叠菜单代码”是一个针对后台管理系统的界面设计资源，主要包含实现左侧折叠菜单的代码。这样的菜单设计是后台管理界面中常见的元素，旨在提高用户体验，通过折叠的方式节省空间...
网站后台下拉菜单是网页设计中的一个重要组成部分，它在用户界面中扮演着高效导航的角色。...在实际项目中，理解并掌握下拉菜单的实现原理和优化方法，将有助于提升用户体验，使网站后台更加易于管理和使用。
本资源“经典后台左侧菜单”提供了一个易于学习和修改的代码实例，主要涉及到的技术栈包括jQuery、CSS和JavaScript。 首先，jQuery是一种轻量级的JavaScript库，它简化了JavaScript的DOM操作、事件处理和动画制作。...
"JS实现折叠菜单后台管理页面"的主题聚焦于使用JavaScript语言来创建这种功能，使得用户能够在需要时展开或收起菜单项，提高操作效率。在此，我们将深入探讨如何利用JavaScript以及相关的前端技术来实现这一功能。 ...
本项目名为"jquery黑色的管理后台左侧菜单"，主要利用jQuery库来创建一个功能丰富的后台菜单系统。这个菜单设计独特，具有黑色的主题色，不仅看起来专业且优雅，而且提供了可折叠的功能，使得在有限的屏幕空间内可以...
总的来说，这个压缩包提供了一个完整的js折叠菜单解决方案，适用于后台管理系统的左侧菜单设计。开发者可以通过研究这些文件，了解如何使用JavaScript和CSS创建类似的菜单，同时优化用户体验。无论是初学者还是经验...
在后台管理系统中，HTML通常用于构建表格、表单、导航菜单等元素，而JS则用于实现数据验证、异步请求、页面动态加载等功能。 首先，让我们探讨一下“框架”的概念。在IT行业中，框架是一组预先编写好的代码，它们...