<!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>
分享到:
相关推荐
在本文中,我们将深入探讨如何使用layui框架中的tree模块创建一个功能完备的树形下拉菜单。layui是一款轻量级的前端UI框架,它提供了丰富的组件和API,使得开发者能够快速构建美观且响应式的Web应用。在“layui树形...
在IT领域,前端开发经常会遇到需要展示层次结构数据的情况,比如组织架构、产品分类等,这时树形下拉菜单就显得尤为重要。layui是一款优秀的国产前端框架,它以其简洁的API和丰富的组件,深受开发者喜爱。本教程将...
### JSP自定义标签——树形下拉选择菜单解析 #### 一、概念与应用场景 在JSP(Java Server Pages)开发中,自定义标签是一种非常实用的技术,它允许开发者创建可重用的代码组件,简化JSP页面的编写工作。本文档将...
树形下拉列表是一种在用户界面中常见的交互元素,它结合了传统的下拉列表和树状结构的特点,常用于展示层级关系的数据。在Web开发中,实现这样的功能通常需要前端和后端的协同工作。本篇文章将重点讲解如何通过递归...
《jQuery树形下拉列表选择框的实现与应用》 在网页开发中,为了提高用户体验,我们经常需要设计一些交互性更强的元素,比如树形下拉列表选择框。这种控件可以让用户在多级分类中进行选择,既节省空间,又能清晰地...
本文将深入探讨“三级树形下拉菜单”及其JavaScript特效的实现。 一、树形菜单概述 树形菜单是模拟计算机文件系统的目录结构,用于组织大量链接或功能的一种方式。在网页中,它可以作为导航栏,帮助用户快速找到所...
不错的jquery树形下拉菜单,在此跟大家分享一下。希望提出宝贵意见……
ASP.NET 实现树形下拉列表是一个常见的需求,在 Web 应用程序中,它能够提供更丰富的用户交互体验,使得用户可以选择多个层级的数据项。在本文中,我们将深入探讨如何在 ASP.NET 中创建一个这样的组件。 首先,我们...
树形下拉菜.vi 一个LabVIEW的小程序
在网页设计中,树形下拉菜单是一种常见的交互元素,它可以帮助用户在多级结构的数据中进行导航。本文将详细讲解如何创建一个“最简单树形下拉菜单”,以及实现这个功能所需的关键技术。 首先,我们需要理解树形下拉...
树形下拉列表框是一种交互式的用户界面组件,它结合了传统的下拉列表与树状结构的优点,使得用户在选择时能以层级的方式查看和选择数据。这种组件常见于需要展示具有层次关系的数据集合,例如组织结构、地区分类或者...
树形下拉列表控件(TreeView with Dropdown)是Windows Forms或WPF应用中的一种交互式UI元素,它结合了传统的下拉列表和树视图的功能,允许用户在层次结构中选择数据。这种控件在需要展示具有分类关系的数据时特别...
**jsTreeSelect:jQuery实现的树形下拉菜单** jsTreeSelect是一款基于jQuery的插件,它能够将传统的下拉菜单转变为交互式的树形结构,为用户提供了更丰富的选择体验。这种树形下拉菜单在数据层级关系复杂时特别有用...
树形下拉组件是一种在用户界面设计中常见的交互元素,尤其在数据层级关系复杂时,如组织架构、地区分类或产品目录等场景下,能够提供更直观、高效的筛选与选择方式。这种组件将传统的下拉框与树形结构相结合,使得...
在网页设计和开发中,"树形下拉控件"是一种常见的交互元素,它结合了树状结构和下拉列表的功能,为用户提供了一种高效、直观的方式来浏览和选择层次化的数据。这种控件通常用于展示有层级关系的数据,如目录结构、...
本项目是基于Layui和ZTree的树形下拉选择器设计源码,包含118个文件,其中75个GIF文件,24个JavaScript文件,6个CSS文件。该系统是一个基于layui和ztree的树形下拉选择器,提供了丰富的功能,包括异步加载、点击回调...
本项目“jQuery实现多级手风琴树形下拉菜单multi_menu.rar”就是一个典型的例子,它允许用户轻松创建具有动画效果的多级手风琴式下拉菜单,提升了用户在浏览网站时的导航体验。 手风琴菜单是一种常见的UI设计模式,...
在本文中,我们将深入探讨如何将Silverlight的树形下拉控件转化为WPF(Windows Presentation Foundation)环境下的使用,并以此创建一个名为“wpf_combobox_tree”的自定义控件。这种控件通常用于增强传统的ComboBox...
Bootstrap Tree形下拉框是一种将传统的下拉...通过合理的HTML布局、JavaScript初始化和事件处理,我们可以构建出高效且易于操作的树形下拉菜单。在开发过程中,可以根据项目需求进行定制,以满足各种复杂的业务场景。