<!--Modify by visc.cn for cbiw.com.cn 2007-03-19-->
<!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=gb2312" />
<title>刷新不变化树形菜单 - 未寺客JS</title>
<style type="text/css">
body,td,th {font-size: 14px;}
.leftmenu1 {font-weight: bold; cursor: hand; padding-top: 4px; height: 29px; text-align: left;}
.leftmenu2 {PADDING-LEFT:15px; height: 21px;text-align: left;}
div{ margin-top:90px; width:100%; text-align:center; }
</style>
</head>
<body>
<div>
<script language="JavaScript" type="text/javascript">
function Show(id,i_id){
var on_img="http://www.cbiw.com.cn/member/pic/ass04.gif";//打开时图片
var off_img="http://www.cbiw.com.cn/member/pic/ass03.gif";//隐藏时图片
var obj=document.getElementById('c_'+id);
if(obj.style.display=="none"){
obj.style.display="";
i_id.src=on_img;
//将子菜单Id放入Cookies
var curShow = readCookie('curShow');
if(curShow!='')
{
var arr_curShow = curShow.split(',');
var found = false;
for(i=0;i<arr_curShow.length-1;i++)
{
if(arr_curShow[i].toString()==id) {found=true;}
}
if(!found){writeCookie('curShow',curShow+','+id,12)}
}
else {
writeCookie('curShow',id,12)
}
//将子菜单Id放入Cookies End
}else{
obj.style.display="none";
i_id.src=off_img;
//将子菜单Id从Cookies中移除
var curShow = readCookie('curShow');
if(curShow!='')
{
var arr_curShow = curShow.split(',');
for(i=0;i<arr_curShow.length;i++)
{
if(arr_curShow[i].toString()==id) {arr_curShow=arr_curShow.del(i--);}
}
curShow = arr_curShow.join(',');
//alert(curShow);
writeCookie('curShow',curShow,12)
}
//将子菜单Id从Cookies中移除 End
}
}
function readCookie(name)
{
var cookieValue = "";
var search = name + "=";
if(document.cookie.length > 0)
{
offset = document.cookie.indexOf(search);
if (offset != -1)
{
offset += search.length;
end = document.cookie.indexOf(";", offset);
if (end == -1) end = document.cookie.length;
cookieValue = unescape(document.cookie.substring(offset, end))
}
}
return cookieValue;
}
function writeCookie(name, value, hours)
{
var expire = "";
if(hours != null)
{
expire = new Date((new Date()).getTime() + hours * 3600000);
expire = "; expires=" + expire.toGMTString();
}
document.cookie = name + "=" + escape(value) + expire;
}
Array.prototype.del=function(n) { //n表示第几项,从0开始算起。
//prototype为对象原型,注意这里为对象增加自定义方法的方法。
if(n<0) //如果n<0,则不进行任何操作。
return this;
else
return this.slice(0,n).concat(this.slice(n+1,this.length));
}
window.onload = function a()
{
var curShow = readCookie('curShow');
var totalShow = 5; //自己修改一共有多少个二级分类
if(curShow!=''&&curShow!=null)
{
for(i=1;i<=totalShow;i++)
{
document.getElementById('c_'+i).display="none";
}
var arr_curShow;
arr_curShow = curShow.split(',');
for(i=0;i<=arr_curShow.length-1;i++)
{
if(arr_curShow[i]!=''){document.getElementById('c_'+arr_curShow[i]).style.display="";}
}
}
}
</script>
<table width="10%" border="0" align="center" cellpadding="0" cellspacing="0">
<tbody>
<tr>
<td class="leftmenu1"> <a style="cursor: pointer" onclick="Show(1,img1)"><img src="http://www.cbiw.com.cn/member/pic/ass03.gif" width="16" height="16" align="absmiddle" id="img1"/><span class="ft_white"> 个人资料</span></a></td></tr>
</tbody>
<tbody id="c_1" style="display: none">
<tr>
<td class="leftmenu2"><img src="http://www.cbiw.com.cn/member/pic/ass06.gif" width="9" height="9" /> <a href="#">基本信息</a></td></tr>
<tr>
<td class="leftmenu2"><img src="http://www.cbiw.com.cn/member/pic/ass06.gif" width="9" height="9" /> <a href="#">修改密码</a></td></tr>
</tbody>
<tbody>
<tr>
<td class="leftmenu1"> <a style="cursor: pointer" onclick="Show(2,img2)"><img src="http://www.cbiw.com.cn/member/pic/ass03.gif" width="16" height="16" align="absmiddle" id="img2"/><span class="ft_white"> 我的简历</span></a></td></tr>
</tbody>
<tbody id="c_2" style="display: none">
<tr>
<td class="leftmenu2" ><img src="http://www.cbiw.com.cn/member/pic/ass06.gif" width="9" height="9" /> <a href="#">求职简历</a></td></tr>
<tr>
<td class="leftmenu2" ><img src="http://www.cbiw.com.cn/member/pic/ass06.gif" width="9" height="9" /> <a href="#">求职意向</a></td></tr>
<tr>
<td class="leftmenu2" ><img src="http://www.cbiw.com.cn/member/pic/ass06.gif" width="9" height="9" /> <a href="#">上传照片</a></td></tr>
<tr>
<td class="leftmenu2" ><img src="http://www.cbiw.com.cn/member/pic/ass06.gif" width="9" height="9" /> <a href="#">简历预览</a></td></tr>
</tbody>
<tbody>
<tr>
<td class="leftmenu1"> <a style="cursor: pointer" onclick="Show(3,img3)"><img src="http://www.cbiw.com.cn/member/pic/ass03.gif" width="16" height="16" align="absmiddle" id="img3"/><span class="ft_white"> 职位搜索</span></a></td></tr>
</tbody>
<tbody id="c_3" style="display: none">
<tr>
<td class="leftmenu2" ><img src="http://www.cbiw.com.cn/member/pic/ass06.gif" width="9" height="9" /> <a href="#">快速搜索</a></td></tr>
</tbody>
<tbody>
<tr>
<td class="leftmenu1"> <a style="cursor: pointer" onclick="Show(4,img4)"><img src="http://www.cbiw.com.cn/member/pic/ass03.gif" width="16" height="16" align="absmiddle" id="img4"/><span class="ft_white"> 应聘管理</span></a></td></tr>
</tbody>
<tbody id="c_4" style="display: none">
<tr>
<td class="leftmenu2" ><img src="http://www.cbiw.com.cn/member/pic/ass06.gif" width="9" height="9" /> <a href="#">应聘记录</a></td></tr>
<tr>
<td class="leftmenu2" ><img src="http://www.cbiw.com.cn/member/pic/ass06.gif" width="9" height="9" /> <a href="#">企业邀请</a></td></tr>
<tr>
<td class="leftmenu2" ><img src="http://www.cbiw.com.cn/member/pic/ass06.gif" width="9" height="9" /> <a href="#">收藏职位</a></td></tr>
</tbody>
<tbody>
<tr>
<td class="leftmenu1"> <a style="cursor: pointer" onclick="Show(5,img5)"><img src="http://www.cbiw.com.cn/member/pic/ass03.gif" width="16" height="16" align="absmiddle" id="img5"/><span class="ft_white"> 我的知识</span></a></td></tr>
</tbody>
<tbody id="c_5" style="display: none">
<tr>
<td class="leftmenu2" ><img src="http://www.cbiw.com.cn/member/pic/ass06.gif" width="9" height="9" /> <a href="#">我要提问</a></td></tr>
<tr>
<td class="leftmenu2" ><img src="http://www.cbiw.com.cn/member/pic/ass06.gif" width="9" height="9" /> <a href="#">我要回答</a></td></tr>
<tr>
<td class="leftmenu2" ><img src="http://www.cbiw.com.cn/member/pic/ass06.gif" width="9" height="9" /> <a href="#">发问记录</a></td></tr>
<tr>
<td class="leftmenu2" ><img src="http://www.cbiw.com.cn/member/pic/ass06.gif" width="9" height="9" /> <a href="#">回答记录</a></td></tr>
<tr>
<td class="leftmenu2" ><img src="http://www.cbiw.com.cn/member/pic/ass06.gif" width="9" height="9" /> <a href="http://www.visc.cn" target="_blank" title="未寺客(visc.cn) - 做个广告,嘿嘿">分数记录</a></td></tr>
</tbody>
</table>
</div>
</body>
</html>
分享到:
相关推荐
本话题主要聚焦于一个特定的实现——"可刷新无限多级树形菜单",它具备了良好的浏览器兼容性,并且允许便捷地添加新节点。 首先,树形菜单的基础是JavaScript,一种广泛用于网页动态效果和交互的编程语言。通过...
当用户在浏览过程中操作了树形菜单,比如展开或关闭某个节点,为了在刷新页面后仍能保持用户的操作状态,可以利用JavaScript配合cookies来实现这一功能。 首先,我们需要理解cookies的工作原理。Cookies是服务器在...
总结来说,实现页面刷新时树形菜单状态不改变的功能,需要了解cookie的工作机制和使用场景,掌握JavaScript操作cookie的方法,以及能够灵活运用DOM操作来动态改变页面元素的状态。在设计和实现过程中,还需考虑到...
2. **减少页面跳转**:通过Ajax,用户在选择树形菜单节点时,可以不刷新整个页面,而是仅更新与所选节点相关的部分,提升操作速度和用户体验。 3. **优化性能**:只请求必要的数据,降低了服务器压力,提高了响应...
1. **设置Cookie**:当用户在树形菜单中选择某个项时,程序记录该选择,将其编码为字符串并写入Cookie。Cookie通常有键值对的形式,例如,键可以是菜单项ID,值是用户选择的标记。 2. **读取Cookie**:在页面加载时...
对于深度嵌套的树形菜单,性能优化是必不可少的。只加载当前展开的节点可以减少内存占用。同时,使用DiffUtil来高效地比较数据集的变化,避免不必要的视图刷新。 **8. UI优化** 最后,要确保UI设计符合Android ...
在IT领域,尤其是在Web开发中,构建多层树形菜单是一项常见的需求,它能帮助用户以结构化的方式浏览和操作复杂的数据。JavaScript和jQuery库是实现这一功能的强大工具。本项目着重探讨如何利用这两种技术来创建动态...
在本文中,我们将深入探讨如何使用layui框架中的tree模块创建一个功能完备的树形下拉菜单。layui是一款轻量级的前端UI框架,它提供了丰富的组件和API,使得开发者能够快速构建美观且响应式的Web应用。在“layui树形...
"无限级可刷新Js树型菜单 dTree" 是一个JavaScript库,用于在Web应用中创建能够无限层级展开和刷新的树形菜单。这个标题表明该库特别适用于那些需要展示复杂层次结构数据的场景,比如组织结构、文件系统或者导航菜单...
5. **可扩展性**:优秀的树形导航菜单应该支持动态加载和插入新的菜单项,这样可以适应不断变化的网站内容。 6. **无障碍性**:考虑到无障碍性( Accessibility),菜单需要对屏幕阅读器友好,可以通过键盘导航,...
【标题】:“基于DHTML实现的树形菜单与选项卡插件源码示例” 【内容详解】 DHTML(Dynamic HTML)是一种技术集合,它包括HTML、CSS、JavaScript以及DOM(Document Object Model)等,用于增强网页的动态交互性。...
需求: vue-cli项目树形控件:一级节点为本地节点,默认展开一级节点,增删改后局部刷新数据。 增加节点,点击确定后局部刷新,渲染新数据。 源码 element组件样式 <el-tree class="treeitems" :data="data...
1.完整的包命名空间 2.自定义header footer ...14.无变化重新刷新整个树Refresh 15.支持插件开发,可以为树添加更多功能,例如下拉框树,选择框树,可编辑内容的树,拖动节点等都可以很容易自己实现或者根据第三方js实现
在网页开发中,数据结构的可视化是常见的需求,尤其在处理层次结构数据时,树形菜单成为一种理想的选择。`dTree` 是一个强大的JavaScript库,专用于创建无限级的可刷新树型菜单。这个库允许用户在网页上动态展示和...
6. UI库和框架:现代Web开发中,许多UI库(如React、Vue、Angular)提供了现成的树形组件,它们封装了上述功能,使得开发者可以更快速、方便地构建无限级可刷新的树型菜单。 7. 性能优化:对于大数据量的树型菜单,...
Vue.js中有很多优秀的树形插件可以帮助我们实现这一需求,本项目就是一个关于如何在Vue.js中自定义添加、编辑和删除树形结构菜单的实例。 首先,我们要理解树形结构的基本概念。在计算机科学中,树是一种非线性的...
4. 菜单系统:网站或应用程序的导航菜单常采用树形结构,允许开发者动态调整布局和链接。 开发这样的系统时,需要考虑的关键点包括: - 数据模型:设计一个能够存储和操作树形结构的高效数据模型。 - 用户界面:...