`
yjgyjg4
  • 浏览: 118149 次
  • 性别: Icon_minigender_1
  • 来自: 广州
社区版块
存档分类
最新评论

树形下拉

阅读更多
<!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>sample</title>
<SCRIPT LANGUAGE="JavaScript">
<!--
	function onclickChange(obj,index){
		document.getElementById(obj).style.fontWeight='bold';
		document.getElementById(obj).style.color='#D07B02'; 
		for(i=1; i<=6; i++){
			if(i != index){
				document.getElementById('tar'+i).style.fontWeight='';
				document.getElementById('tar'+i).style.color='#000000';
			}
		}
	}
//-->
</SCRIPT>
<style type="text/css">
* {
	margin:0;
	padding:0;
	list-style:none;
}
body {
	font-family: Arial, Helvetica, sans-serif;
	font-size: 12px;
	margin:2px;
}

a:link {
	color: #000000;
	text-decoration: none
}

a:visited {
	color: #000000;
	text-decoration: none
}

a:hover {
	color: #000000;
	text-decoration: underline;
}

#basic-accordian{
	border:1px solid #a5a576; 边框颜色
	padding:5px;
	width:170px;
	position:absolute;
	left:50%;
	top:50%;
	margin-left:-175px;
	z-index:2;
	margin-top:-100px;
}

.accordion_headings{
	padding:5px;
	background:#ffe89c;
	color:#010102;
	border:1px solid #a5a576;
	cursor:pointer;
	font-weight:bold;
}

.accordion_headings:hover{
	background:#feb24b;
}

.accordion_child{
	padding:8px;
	background:#ffffe7;
}

.header_highlight{
	background:#feb24b;
}

</style>
<script type="text/javascript" src="accordian.pack.js"></script>
</head>
<body onload="new Accordian('basic-accordian',5,'header_highlight');" topmargin="0">
<div id="basic-accordian" style="left: 180px; top: 104px" > 
  <!--Parent of the Accordion-->
  <!--Start of each accordion item-->
  <div id="test-header" class="accordion_headings header_highlight" >Home</div><!--Heading of the accordion ( clicked to show n hide ) -->
  
  <!--Prefix of heading (the DIV above this) and content (the DIV below this) to be same... eg. foo-header & foo-content-->
  
  <div id="test-content"><!--DIV which show/hide on click of header-->
  
  	<!--This DIV is for inline styling like padding...-->
    <div class="accordion_child">
    	
      <a href="#" onclick="onclickChange('tar1',1)"><font id="tar1">Content1</font></a>
     <br><br>
    <a href="#" onclick="onclickChange('tar2',2)"><font id="tar2">Content2</font></a>
    </div>
    
  </div>
<!--End of each accordion item--> 

<!--Start of each accordion item-->
  <div id="test1-header" class="accordion_headings" >About Us</div><!--Heading of the accordion ( clicked to show n hide ) -->
  
  <!--Prefix of heading (the DIV above this) and content (the DIV below this) to be same... eg. foo-header & foo-content-->
  
  <div id="test1-content"><!--DIV which show/hide on click of header-->
  
  	<!--This DIV is for inline styling like padding...-->
      <div class="accordion_child">
    <a href="#" onclick="onclickChange('tar3',3)"><font id="tar3">Content1</font></a>
		<br><br>
    <a href="#" onclick="onclickChange('tar4',4)"><font id="tar4">Content2</font></a>
    </div>
    
  </div>
<!--End of each accordion item--> 
<!--Start of each accordion item-->
  <div id="test2-header" class="accordion_headings" >Downloads</div><!--Heading of the accordion ( clicked to show n hide ) -->
  
  <!--Prefix of heading (the DIV above this) and content (the DIV below this) to be same... eg. foo-header & foo-content-->
  
  <div id="test2-content"><!--DIV which show/hide on click of header-->
  	<!--This DIV is for inline styling like padding...-->
      <div class="accordion_child">
    <a href="#" onclick="onclickChange('tar5',5)"><font id="tar5">Content1</font></a>
		<br><br>
    <a href="#" onclick="onclickChange('tar6',6)"><font id="tar6">Content2</font></a>
    </div>
  </div>
<!--End of each accordion item--> 
</div><!--End of accordion parent-->
</body>
</html>
分享到:
评论
1 楼 jsjxqjy 2009-12-15  
LZ英文很强!js也很强

相关推荐

    layui树形下拉菜单完整实例

    在本文中,我们将深入探讨如何使用layui框架中的tree模块创建一个功能完备的树形下拉菜单。layui是一款轻量级的前端UI框架,它提供了丰富的组件和API,使得开发者能够快速构建美观且响应式的Web应用。在“layui树形...

    layui树形下拉菜单

    在IT领域,前端开发经常会遇到需要展示层次结构数据的情况,比如组织架构、产品分类等,这时树形下拉菜单就显得尤为重要。layui是一款优秀的国产前端框架,它以其简洁的API和丰富的组件,深受开发者喜爱。本教程将...

    JSP自定义标签(一)_树形下拉选择菜单

    ### JSP自定义标签——树形下拉选择菜单解析 #### 一、概念与应用场景 在JSP(Java Server Pages)开发中,自定义标签是一种非常实用的技术,它允许开发者创建可重用的代码组件,简化JSP页面的编写工作。本文档将...

    树形下拉列表 递归实现

    树形下拉列表是一种在用户界面中常见的交互元素,它结合了传统的下拉列表和树状结构的特点,常用于展示层级关系的数据。在Web开发中,实现这样的功能通常需要前端和后端的协同工作。本篇文章将重点讲解如何通过递归...

    jQuery树形下拉列表选择框代码

    《jQuery树形下拉列表选择框的实现与应用》 在网页开发中,为了提高用户体验,我们经常需要设计一些交互性更强的元素,比如树形下拉列表选择框。这种控件可以让用户在多级分类中进行选择,既节省空间,又能清晰地...

    三级树形下拉菜单,树形菜单javascript特效

    本文将深入探讨“三级树形下拉菜单”及其JavaScript特效的实现。 一、树形菜单概述 树形菜单是模拟计算机文件系统的目录结构,用于组织大量链接或功能的一种方式。在网页中,它可以作为导航栏,帮助用户快速找到所...

    JQuery树形下拉菜单

    不错的jquery树形下拉菜单,在此跟大家分享一下。希望提出宝贵意见……

    asp.net实现树形下拉列表

    ASP.NET 实现树形下拉列表是一个常见的需求,在 Web 应用程序中,它能够提供更丰富的用户交互体验,使得用户可以选择多个层级的数据项。在本文中,我们将深入探讨如何在 ASP.NET 中创建一个这样的组件。 首先,我们...

    LabVIEW树形下拉菜.vi

    树形下拉菜.vi 一个LabVIEW的小程序

    最简单树形下拉菜单

    在网页设计中,树形下拉菜单是一种常见的交互元素,它可以帮助用户在多级结构的数据中进行导航。本文将详细讲解如何创建一个“最简单树形下拉菜单”,以及实现这个功能所需的关键技术。 首先,我们需要理解树形下拉...

    树形下拉列表框

    树形下拉列表框是一种交互式的用户界面组件,它结合了传统的下拉列表与树状结构的优点,使得用户在选择时能以层级的方式查看和选择数据。这种组件常见于需要展示具有层次关系的数据集合,例如组织结构、地区分类或者...

    C#树形下拉列表控件

    树形下拉列表控件(TreeView with Dropdown)是Windows Forms或WPF应用中的一种交互式UI元素,它结合了传统的下拉列表和树视图的功能,允许用户在层次结构中选择数据。这种控件在需要展示具有分类关系的数据时特别...

    jsTreeSelect jquery 树形下拉菜单

    **jsTreeSelect:jQuery实现的树形下拉菜单** jsTreeSelect是一款基于jQuery的插件,它能够将传统的下拉菜单转变为交互式的树形结构,为用户提供了更丰富的选择体验。这种树形下拉菜单在数据层级关系复杂时特别有用...

    树形下拉组件

    树形下拉组件是一种在用户界面设计中常见的交互元素,尤其在数据层级关系复杂时,如组织架构、地区分类或产品目录等场景下,能够提供更直观、高效的筛选与选择方式。这种组件将传统的下拉框与树形结构相结合,使得...

    树形下拉控件

    在网页设计和开发中,"树形下拉控件"是一种常见的交互元素,它结合了树状结构和下拉列表的功能,为用户提供了一种高效、直观的方式来浏览和选择层次化的数据。这种控件通常用于展示有层级关系的数据,如目录结构、...

    基于Layui和ZTree的树形下拉选择器设计源码

    本项目是基于Layui和ZTree的树形下拉选择器设计源码,包含118个文件,其中75个GIF文件,24个JavaScript文件,6个CSS文件。该系统是一个基于layui和ztree的树形下拉选择器,提供了丰富的功能,包括异步加载、点击回调...

    jQuery实现多级手风琴树形下拉菜单multi_menu.rar

    本项目“jQuery实现多级手风琴树形下拉菜单multi_menu.rar”就是一个典型的例子,它允许用户轻松创建具有动画效果的多级手风琴式下拉菜单,提升了用户在浏览网站时的导航体验。 手风琴菜单是一种常见的UI设计模式,...

    wpf_combobox_tree下拉树形控件

    在本文中,我们将深入探讨如何将Silverlight的树形下拉控件转化为WPF(Windows Presentation Foundation)环境下的使用,并以此创建一个名为“wpf_combobox_tree”的自定义控件。这种控件通常用于增强传统的ComboBox...

    bootstrap树形下拉框 下拉框树形菜单

    Bootstrap Tree形下拉框是一种将传统的下拉...通过合理的HTML布局、JavaScript初始化和事件处理,我们可以构建出高效且易于操作的树形下拉菜单。在开发过程中,可以根据项目需求进行定制,以满足各种复杂的业务场景。

Global site tag (gtag.js) - Google Analytics