`
jackroomage
  • 浏览: 1228931 次
  • 性别: Icon_minigender_1
  • 来自: 北京
社区版块
存档分类

列表显示的切换功能,有多级列表

 
阅读更多

<%@ page language="java" contentType="text/html"
    pageEncoding="utf-8"%>
<html>
<head>
<title>Insert title here</title>
</head>
<body>

<div class="journal">
    <div class="journalTitle"></div>
    <div class="journalContent solid">
<div class="journalYear">

 <a style="cursor:hand" onmouseover="document.getElementById('2010_list').style.display='';document.getElementById('2009_list').style.display='none';document.getElementById('2008_list').style.display='none';">
 2010年</a>
 |
<a style="cursor:hand" onmouseover="document.getElementById('2010_list').style.display='none';document.getElementById('2009_list').style.display='';document.getElementById('2008_list').style.display='none';">
2009年</a>
 |
 <a style="cursor:hand" onmouseover="document.getElementById('2010_list').style.display='none';document.getElementById('2009_list').style.display='none';document.getElementById('2008_list').style.display='';">
 2008年</a>

</div>
      <div id="2010_list" class="fl">
        <div class="journalYearL"><img src="fm.jpg"></div>
        <div class="journalYearR">
          <p><a style="cursor:hand" onmouseover="document.getElementById('2010_lis').style.display='';document.getElementById('2009_lis').style.display='none';document.getElementById('2008_lis').style.display='none';"><span class="blue1 B fl">1</span></a></p>
          <p><a style="cursor:hand" onmouseover="document.getElementById('2010_lis').style.display='none';document.getElementById('2009_lis').style.display='';document.getElementById('2008_lis').style.display='none';"><span class="blue1 B fl">11</span></a></p>
          <p><a style="cursor:hand" onmouseover="document.getElementById('2010_lis').style.display='none';document.getElementById('2009_lis').style.display='none';document.getElementById('2008_lis').style.display='';"><span class="blue1 B fl">111</span></a></p>
        </div>
       
<!-- 三级目录 start -->       
       
           <div id="2010_lis" class="fl">
        <div class="journalYearL"><img src="fm1.jpg"></div>
        <div class="journalYearR">
          <p><span class="blue1 B fl">a</span></p>
          <p><span class="blue1 B fl">aa</span></p>
          <p><span class="blue1 B fl">aaa</span></p>
        </div>
      </div>
      <div id="2009_lis" class="fl" style="display: none;">
        <div class="journalYearL"><img src="fm1.jpg"></div>
        <div class="journalYearR">
          <p><span class="blue1 B fl">b</span></p>
          <p><span class="blue1 B fl">bb</span></p>
          <p><span class="blue1 B fl">bbb</span></p>
        </div>
      </div>
      <div id="2008_lis" class="fl" style="display: none;">
        <div class="journalYearL"><img src="fm1.jpg"></div>
        <div class="journalYearR">
          <p><span class="blue1 B fl">c</span></p>
          <p><span class="blue1 B fl">cc</span></p>
          <p><span class="blue1 B fl">ccc</span></p>
        </div>
      </div>
 <!-- 三级目录 end -->         
       
       
       
      </div>
      <div id="2009_list" class="fl" style="display: none;">
        <div class="journalYearL"><img src="fm.jpg"></div>
        <div class="journalYearR">
          <p><span class="blue1 B fl">2</span></p>
          <p><span class="blue1 B fl">22</span></p>
          <p><span class="blue1 B fl">222</span></p>
        </div>
      </div>
      <div id="2008_list" class="fl" style="display: none;">
        <div class="journalYearL"><img src="fm.jpg"></div>
        <div class="journalYearR">
          <p><span class="blue1 B fl">3</span></p>
          <p><span class="blue1 B fl">33</span></p>
          <p><span class="blue1 B fl">333</span></p>
        </div>
      </div>
    </div>
</div>

</body>
</html>

 

分享到:
评论

相关推荐

    LCD多级菜单显示Menu.rar_LCD 列表 显示_LCDdriver_lcd 菜单_lcd显示菜单_菜单

    在LCD显示技术中,多级菜单的实现是常见的交互方式,尤其在嵌入式系统或者工业设备中。本文将深入探讨LCD多级菜单显示的技术原理、实现方法以及相关的编程概念。 1. LCD(液晶显示屏)简介 LCD,即Liquid Crystal ...

    HTML制作多级菜单_一级下拉菜单导航菜单+二三级选项卡tab-移动到菜单上就切换选项卡.zip

    总的来说,这个压缩包中的示例展示了如何结合HTML、CSS和JavaScript来创建具有下拉菜单和选项卡切换功能的多级菜单。开发者需要理解这些技术的基本概念,以及如何将它们整合到一起,以创建一个响应式且用户友好的...

    Select-下拉列表多级联动

    在网页设计和开发中,"下拉列表多级联动"是一种常见的交互功能,它使得用户在选择一个选项时,相关的下拉列表会自动更新以显示与前一个选择相关的选项。这种技术增强了用户体验,减少了用户在多个菜单之间切换的麻烦...

    51单片机lcd多级菜单.rar_51单片机显示_LCD多级菜单_lcd 菜单_单片机菜单_多级菜单

    5. **状态管理**:为了实现多级菜单的切换,需要跟踪当前菜单层级和选中项,这通常用变量或状态机来实现。 6. **循环和递归**:在菜单结构中,可能会用到循环或递归来遍历各级菜单,确保所有菜单项都能被访问。 7....

    使用GD32单片机在ST7789显示屏上实现多级菜单功能-第一部分(ST7789的驱动)

    在本文中,我们将深入探讨如何使用GD32单片机在ST7789 LCD显示屏上实现多级菜单功能。ST7789是一款高性能、低功耗的TFT液晶控制器/驱动器,广泛应用于小型彩色显示设备。GD32系列单片机以其强大的处理能力、丰富的...

    jQuery多级下拉菜单支持多级下拉列表菜单.zip

    这个名为"jQuery多级下拉菜单支持多级下拉列表菜单"的资源,就是专门为商城网站或企业网站设计的一种实现方式。 jQuery多级下拉菜单的核心在于利用CSS样式定义菜单结构,然后通过jQuery的事件监听和DOM操作来控制...

    stm32多级菜单实现12864.rar_12864多级菜单_STM32按键翻页_stm32 freertos_stm32 m

    在本项目"stm32多级菜单实现12864.rar"中,重点是利用STM32与FreeRTOS实时操作系统来实现一个具有12864液晶屏显示的多级菜单系统,并支持按键翻页功能。12864是一种常见的LCD模块,它有128x64像素的分辨率,通常用于...

    1602多级菜单显示

    在IT领域,1602多级菜单显示是一种常见的用户界面设计,常见...压缩包中的"1602多级菜单显示"可能包含了实现这一功能的源代码、原理图或详细教程,对于学习和实践LCD1602菜单设计的初学者来说是非常有价值的参考资料。

    多级菜单实例 多级菜单实例 多级菜单实例

    这种设计有助于用户快速找到他们需要的功能或信息,特别是在内容或功能众多的情况下。 在这个特定的实例中,开发者提到为了实现多级菜单花费了一整天的时间,这表明构建这样的功能可能涉及到相对复杂的逻辑和交互...

    Android 自定义ListView和RecycleView实现多级树功能

    综上所述,实现一个类似QQ分组列表的多级树功能,需要结合数据模型、自定义Adapter、视图复用机制以及交互逻辑等多个方面进行开发。尽管ListView和RecyclerView有各自的实现方式,但核心思想是一致的,都是为了有效...

    lcd多级菜单的实现

    在嵌入式系统中,LCD(Liquid Crystal Display)通常用于显示信息,而多级菜单则为用户提供了一种层次化的操作方式,使用户能够方便地访问和控制复杂的功能。 首先,我们要理解LCD的基本工作原理。LCD屏幕通过改变...

    oled_oled菜单_oled_oled多级菜单_

    本主题将深入探讨如何在OLED屏幕上实现多级菜单的显示功能。 首先,OLED菜单是一种用户界面设计,它允许用户通过层次结构访问不同的功能或设置。在嵌入式系统或小型设备中,这种菜单设计特别有用,因为它可以有效地...

    Node.js-ListView列表单级单选单级多选多级单选多级多选效果展示

    每个子ListView也具有单选功能,但一次只能有一个子列表中的一个项目被选中。可以通过在父ListView的适配器中维护一个HashMap,键是子ListView的索引,值是子ListView中被选中的项目的索引。当一个子ListView的选择...

    swift-多级分类菜单多级列表仿口碑分类菜单电商筛选菜单

    在Swift编程语言中,创建一个多级分类菜单是构建电商应用或类似口碑平台筛选功能的关键部分。这样的菜单允许用户在多个层次上筛选和探索产品或服务,提供了方便且直观的用户体验。下面我们将深入探讨如何利用Swift...

    android-多级树形选择列表demo

    本教程将详细讲解如何实现一个带有选择框且支持多级复选的树形选择列表,同时具备点击折叠与展开功能。 首先,我们需要理解树形结构。树形结构是一种数据组织形式,其中每个节点可以有零个或多个子节点。在Android...

    基于单片机LCD液晶显示的多级菜单程序解析

    总之,基于单片机的LCD液晶显示多级菜单程序设计涉及到硬件驱动、软件结构、人机交互等多个方面,源码移植则需要对新平台有深入理解。通过不断学习和实践,我们可以更好地掌握这项技术,为各种嵌入式系统开发提供...

    单片机下LCD多级菜单显示程序

    3. **显示更新**:根据用户输入(比如上下键)切换菜单项,更新LCD显示。要确保光标移动的逻辑正确,同时避免超出菜单范围。 4. **按键处理**:编写中断服务程序,监听按键输入。当检测到上下键按下时,更新当前...

    jQuery手机导航多级菜单切换效果

    本文将深入探讨如何使用jQuery实现手机导航的多级菜单切换效果,为移动用户创建一个易于操作和直观的导航系统。 一、jQuery简介 jQuery是一个广泛使用的JavaScript库,它简化了JavaScript的DOM操作、事件处理、动画...

    jQuery多级下拉菜单支持多级下拉列表菜单代码

    主要关注的属性有`display`(控制菜单项的显示与隐藏)、`position`(设置元素定位)和`z-index`(决定元素的覆盖顺序)。例如: ```css .menu ul { display: none; } .menu li:hover &gt; ul { display: block;...

    STM32 OLED多级菜单显示

    总结来说,"STM32 OLED多级菜单显示"项目是结合STM32微控制器的强大功能与OLED显示屏的高效显示,实现一个具有互动性和易操作性的用户界面。通过理解STM32的工作原理,掌握OLED显示驱动,以及熟练运用中断处理和状态...

Global site tag (gtag.js) - Google Analytics