`
GODdaughter
  • 浏览: 104864 次
  • 性别: Icon_minigender_2
  • 来自: 北京
社区版块
存档分类
最新评论

javascript(竖版)树形菜单实例(比较高级3.1)

阅读更多
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>tree menu by jiarry</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<script language="JavaScript" type="text/JavaScript">
<!--//made by jiarry.126.com Aug.27 2004
function showhide_obj(obj,icon)
{
obj=document.getElementById(obj);
icon=document.getElementById(icon);
//objStr=obj.toString(); 
//alert(objStr)
/*objStr=2;
a=objStr.toString()+5;
b=objStr+5
alert(a);alert(b);
*/

 if (obj.style.display=="none")
  { 
    //div_list = document.all.tags("div"); //指定文档中的对象为div,仅适用于IE;  
    div_list = document.getElementsByTagName("div");
    for (i=0; i< div_list.length; i ++) {
      thisDiv = div_list[i];
   if(thisDiv.id.indexOf("title")!=-1)//当文档div中的id含有list时,与charAt类似;
   {
   //if(obj.id!=obj)//该div 的id又非选中的obj,设置该div的style为none
   //{
   thisDiv.style.display="none";//循环吧所有菜单链接都隐藏起来
  // }
   }
 }
 
 
    //myfont=document.all.tags("font");
   myfont=document.getElementsByTagName("font");
   for(i=0;i<myfont.length;i++)
    {
    thisfont = myfont[i];
    if(thisfont.id.indexOf("icon")!=-1 && icon.id!=icon)
    {  
    //alert(thisfont.id)
    //thisfont.innerHTML="+";
     }
   }
    //icon.innerHTML="-";
    obj.style.display=""; //只显示当前链接
}
 else
  {//假如当前对象是打开的,就关闭它;
   //icon.innerHTML="+";
   obj.style.display="none";
   }
 }

function set_initialization(obj,img)
{//设置初始状态,打开一个层;
   obj.style.display="";
   img.src="images/icon/minus.gif";
   }

function show_this(obj)
{
obj=document.getElementById(obj);
if (obj.id==obj.id)
 {
 //alert(obj.id)
   //blinkicon=document.all.tags("font"); 
   blinkicon=document.getElementsByTagName("font");
   for(x=0;x<blinkicon.length;x++)
    {
    if( blinkicon[x].id.indexOf("select")!=-1 && obj.id!=obj )
      {
       blinkicon[x].innerHTML=" ";
      }
    }
      obj.innerHTML="&gt;";
 }
 else
 {
       obj.innerHTML=" ";
 }
}
//-->
</script>
<style type="text/css">
span{ width:100px;Height:25px;margin-left:15px;}
font{font-weight:bold;}
body,td{font-family:Verdana, Arial, Helvetica, sans-serif; font-size:12px;color:#333333;}
div{cursor:default;border-top:1px solid gray ; border-left:1px solid gray ;border-right:1px solid gray ;background-color:#D3F7FE ;width:120px;}
pre{background-color:#FFFFF1; border:1px solid gray;color:blue;font-family:verdana;Arial;padding:20px;}
</style>
</head>

<body>
<p>&nbsp;</p>
<p>&nbsp;</p>
<div style="line-height:25px;" onClick="showhide_obj('title1','icon1')"><font id='icon1'>+</font>railing 1 </div>
<div id="title1"  style="background-color:#fffff3;line-height:22px;display:none;">
<span id=menu1_1 onMouseOver="this.style.backgroundColor='blue'" onMouseOut="this.style.backgroundColor=''" onclick="show_this('select1_1')"><font id='select1_1'></font>menu 1</span></font><br />
<span id="menu1_2" onclick="show_this('select1_2')"><font id='select1_2'></font>menu 2</span></font><br />
<span id="menu1_3" onclick="show_this('select1_3')"><font id='select1_3'></font>menu 3</span></font><br />
</div>
<div style="line-height:25px;" onClick="showhide_obj('title2','icon2')"><font id='icon2'>+</font>railing 2</div>
<div id="title2" style="background-color:#fffff3;line-height:22px;display:none;">
<span id=m"enu2_1" onclick="show_this('select2_1')"><font id='select2_1'></font>menu 1</span></font><br />
<span id="menu2_2" onclick="show_this('select2_2')"><font id='select2_2'></font>menu 2</span></font><br />
<span id="menu2_3" onclick="show_this('select2_3')"><font id='select2_3'></font>menu 3</span></font><br />
</div>
<div style="line-height:25px;" onClick="showhide_obj('title3','icon3')"><font id='icon3'>+</font>railing 3</div>
<div id="title3" style="background-color:#fffff3;line-height:22px;display:none;">
<span id=menu3_1 onclick="show_this('select3_1')"><font id='select3_1'></font>menu 1</span></font><br />
<span id=menu3_2 onclick="show_this('select3_2')"><font id='select3_2'></font>menu 2</span></font><br />
<span id=menu3_3 onclick="show_this('select3_3')"><font id='select3_3'></font>menu 3</span></font><br />
</div>
<div style="line-height:25px;" onClick="showhide_obj('title4','icon4')"><font id='icon4'>+</font>railing 4</div>
<div id="title4" style="background-color:#fffff3;line-height:22px;display:none;">
<span id=menu4_1 onclick="show_this('select4_1')"><font id='select4_1'></font>menu 1</span></font><br />
<span id=menu4_2 onclick="show_this('select4_2')"><font id='select4_2'></font>menu 2</span></font><br />
<span id=menu4_3 onclick="show_this('select4_3')"><font id='select4_3'></font>menu 3</span></font><br />
<span id=menu4_4 onclick="show_this('select4_4')"><font id='select4_4'></font>menu 4</span></font><br />
<span id=menu4_5 onclick="show_this('select4_5')"><font id='select4_5'></font>menu 5</span></font><br />
<span id=menu4_6 onclick="show_this('select4_6')"><font id='select4_6'></font>menu 6</span></font><br />
</div>

</body>
</html>
分享到:
评论

相关推荐

    HTML5 Canvas 2D竖版飞行射击游戏实例

    HTML5 Canvas 2D竖版飞行射击游戏实例是利用HTML5的新特性——Canvas元素和JavaScript进行游戏开发的一个经典案例。Canvas作为一个强大的图形绘制接口,允许开发者通过编程方式动态地在网页上绘制图形,从而实现丰富...

    竖版图片切换 竖版竖版 图片切换

    竖版图片切换的效果通常是通过JavaScript或者Flash技术实现的。Flash是一种曾经广泛用于创建动态内容的技术,它允许开发者创建交互式动画、游戏以及网页元素,包括图片轮播。在本例中,"一款竖版图片切换的Flash特效...

    4.[Android实例] 竖版进度选择器.zip

    4.[Android实例] 竖版进度选择器

    2014竖版效率手册

    《2014竖版效率手册》是一款设计精良的日历效率工具,旨在帮助用户高效地管理日常生活、工作和旅行安排。这款手册以其简洁的竖版布局和实用的功能,成为了提高工作效率的重要助手。 首先,从内容上看,手册以月份为...

    JavaScript实现鼠标滑过图片显示纵向2级导航菜单源码

    在本项目中,“JavaScript实现鼠标滑过图片显示纵向2级导航菜单源码”是一个利用JavaScript技术来创建交互式网页菜单的示例。这个功能通常用于提升用户体验,让用户在浏览网站时能更直观地找到二级或更深层次的链接...

    竖版流程图软件.pdf

    竖版流程图软件.pdf 竖版流程图软件是指一种能够创建竖版流程图的专门软件。竖版流程图是一种特殊的流程图,竖向排列,通常用于描述复杂的业务流程、数据流程或系统流程。这种软件通常具有强大的图形编辑功能、智能...

    竖导航特效实现

    "竖导航特效实现"是指在网页设计中采用垂直布局的导航菜单,并通过CSS3和JavaScript等技术添加动态效果,以提升用户体验和视觉吸引力。这种特效通常包括下拉菜单、悬停效果、平滑滚动等。 1. **CSS3基础**: - **...

    android实例竖着的seekbar

    本实例将探讨如何在Android中实现一个竖直方向的SeekBar。 ### 1. 垂直SeekBar的需求分析 在某些场景下,如空间有限或布局特殊的设计中,水平SeekBar可能不再适用。例如,在音乐播放应用的音量控制、调整图片亮度...

    高考热点——竖版世界地图练习及答案解析.docx

    1. 地图类型及其特点:本练习主要涉及竖版世界地图,相较于传统的横版世界地图,竖版地图在展示高纬度地区的地理特征时具有优势,如两极地区的形状变形较小,更直观地显示了两极地区国家和地区的相对位置,同时也更...

    2021精品手抄报系列-争做文明学生【A4竖版】.doc

    2021精品手抄报系列-争做文明学生【A4竖版】.doc

    javascript 手风琴式的Tab菜单切换代码.rar

    手风琴式的TAb切换菜单,类似选项卡,设计唯美,国外设计网站看到的,于是小编将源代码整理下来的,用到两个Js封装类,已打包。本效果适合于设计类、图片类、IT类网站作为推荐导航,兼容性良好,漂亮美观,相信很多...

    竖版海报.ai

    竖版海报.ai

    竖版滚动相册

    【竖版滚动相册】是一种常见的网页元素,用于展示一系列图片,通过垂直滚动方式呈现,为用户带来独特的浏览体验。这种相册设计通常利用HTML、JavaScript(JS)和CSS技术来实现,使得相册功能更加互动和动态。下面将...

    最新孕妇竖版+孕味十

    方便的设计版面 高端大气 使您的工作更加方便快捷

    2021年历A4竖版(带节假日).xls

    2021年历A4竖版(带节假日).xls

    竖版滚轮效果竖版滚动月份时间轴,点击切换年份.zip

    然后,jQuery是一个强大的JavaScript库,简化了DOM操作、事件处理、动画和Ajax交互。在这个案例中,jQuery扮演着关键角色,实现了点击切换年份的功能。通过`.click()`方法监听用户的点击事件,`.slideUp()`和`....

    硬笔书法A4竖版.doc

    硬笔书法A4竖版.doc 在了解硬笔书法A4竖版.doc之前,我们需要了解什么是硬笔书法。硬笔书法是一种使用硬笔写作的艺术形式,它的历史可以追溯到中国古代。硬笔书法具有很高的艺术价值和文化价值,它不仅是一种书写...

    垂直选项卡竖版选项卡切换文字列表源码下载

    "垂直选项卡竖版选项卡切换文字列表源码下载" 这个标题揭示了我们讨论的核心内容,即一个适用于网页设计的源码实现。它特别提到了“垂直选项卡”和“竖版选项卡切换”,这意味着源码提供了一种布局方式,使得在网页...

    (精品)竖版思维导图软件.doc

    "竖版思维导图软件MindMaster" MindMaster是一款功能强大且易于使用的竖版思维导图软件,旨在帮助用户快速建立和管理思维导图。该软件提供了多种格式的导出功能,能够将思维导图导出为Office文件(Word、Excel、PPT...

    竖版世界地图空白版.doc

    竖版世界地图空白版.doc

Global site tag (gtag.js) - Google Analytics