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

列表显示的切换功能(div)

    博客分类:
  • j2ee
阅读更多

<%@ 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" onclick="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" onclick="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" onclick="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><span class="blue1 B fl">1</span></p>
          <p><span class="blue1 B fl">1</span></p>
          <p><span class="blue1 B fl">1</span></p>
          <p><span class="blue1 B fl">1</span></p>
        </div>
      </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">2</span></p>
          <p><span class="blue1 B fl">2</span></p>
          <p><span class="blue1 B fl">2</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">3</span></p>
          <p><span class="blue1 B fl">3</span></p>
          <p><span class="blue1 B fl">3</span></p>
        </div>
      </div>
    </div>
</div>

</body>
</html>

 

  • 大小: 9.9 KB
  • 大小: 9 KB
分享到:
评论

相关推荐

    js控制div左右切换带左右箭头

    在切换`div`时,可能需要修改某个`div`的`class`以显示或隐藏,或者调整其在容器中的位置。 6. **动画效果**:为了使切换更流畅,通常会使用CSS的`transition`或JavaScript的动画库(如jQuery的`animate`方法)来...

    左右切换div内容

    例如,可以使用指示器(如小点或箭头)来显示当前选中的div,或者添加提示文本以明确切换功能。 8. **测试与调试**:最后,需要在多种浏览器和设备上进行测试,确保切换效果在所有环境下都能正常工作,并使用开发者...

    纯div+css轮播图片切换图片

    图片切换是通过CSS控制图片的显示和隐藏,实现图片的动态变化。这通常涉及到CSS的`display`属性,通过改变图片的可见状态来实现切换。例如,可以创建多个包含图片的div,然后利用CSS选择器和定时器来交替更改这些div...

    div的图层切换函数

    图层切换功能则是一种常见的交互设计手法,可以让用户通过点击或触发某个事件来显示或隐藏不同的`div`层,提高用户体验。本教程将深入探讨如何创建一个简单、通用且代码量小的 `div` 图层切换函数。 首先,我们需要...

    div层完美切换代码

    2. **可访问性**:确保切换功能对所有用户可用,包括使用键盘导航的用户和屏幕阅读器用户。 3. **响应式设计**:根据不同的设备和屏幕尺寸调整`div`层的布局和大小。 4. **交互一致性**:保持切换行为的一致性,...

    div 模拟下拉列表

    这就是"div 模拟下拉列表"的主要应用场景。这个技术主要是通过CSS和JavaScript(通常会结合使用jQuery或其他JS库)来创建一个看起来和行为类似于`&lt;select&gt;`的组件,同时能够更好地控制样式和增加自定义功能。 在...

    Jquery+div/css 鼠标经过内容切换实例

    本实例重点讲解如何利用 jQuery 和 CSS 技术实现在鼠标经过(hover)某个div元素时,动态切换显示的内容。下面我们将深入探讨这个主题。 首先,我们来理解 `div` 和 `CSS` 的基本概念。`div` 是HTML中的一个通用...

    jquery+div实现同时滑动切换的图文展示特效插件下载.rar

    "jQuery+div实现同时滑动切换的图文展示特效插件"就是一个旨在提升用户体验的工具,它利用了JavaScript库jQuery的强大功能和HTML中的div元素来实现动态的、平滑的图文展示效果。接下来,我们将深入探讨这个插件的...

    鼠标放上去显示div

    总的来说,"鼠标放上去显示div"是一个实用的网页交互功能,通过结合HTML、CSS和JavaScript,我们可以创造出丰富的用户体验。同时,这也涉及到前端开发的基础知识,包括DOM操作、事件监听以及CSS样式控制。理解并掌握...

    Div显示与隐藏网页制作

    这时,`Div`的显示和隐藏功能就显得尤为重要。我们可以使用JavaScript或jQuery来实现这一功能,这两种技术都非常适合处理DOM(文档对象模型)中的元素操作。 1. **JavaScript显示和隐藏Div**: - `style.display`...

    大图和列表切换

    例如,一个大图`&lt;div&gt;`可能包含一个`&lt;img&gt;`元素来显示图片,而列表`&lt;div&gt;`则可能包含一系列`&lt;li&gt;`元素来显示每个项目的列表项。 接下来,`style.css`文件则是样式表,负责控制页面的视觉呈现。在大图和列表切换的...

    DIV+CSS+JavaScript实现tab切换的选项卡

    通常,我们会有一个父级`div`作为容器,每个选项卡内容的`div`设置为隐藏,只显示当前选中的内容。 ```html &lt;div id="tab-container"&gt; &lt;div class="tab" id="tab1"&gt;选项卡1的内容&lt;/div&gt; &lt;div class="tab" id="tab...

    js 左右箭头实现图片或div内容切换

    本文将深入探讨如何使用JavaScript(JS)通过左右箭头来实现图片或div内容的切换。这一功能广泛应用于产品展示、轮播图、滑动面板等场景。 首先,我们需要在HTML中设置基本的结构。创建一个包含多个图片或div的容器...

    select实现div图层切换效果(jquery实现)

    在网页设计中,有时我们需要通过不同的交互方式来切换页面上的元素显示,比如通过下拉框(select)的选择来改变div图层的展示。本示例就是利用jQuery库来实现这样的功能,使得用户在select中选择不同的选项时,对应...

    滚动div,实现动态页面切换功能,实现图书翻页

    本文将详细讲解如何通过滚动div来实现这样的功能,让你的页面更加生动且富有交互性。 首先,我们需要理解“滚动div”是什么。在HTML中,div是一个常用的布局元素,可以用来组织网页内容。当我们将div设置为滚动条,...

    jquery实现div模块轮播切换

    本文将深入探讨如何使用 jQuery 来实现一个div模块的轮播切换效果,这种效果通常用于展示多个图片或内容块,使得用户可以在有限的页面空间内浏览更多的信息。 首先,我们需要在HTML中创建轮播的基础结构。这通常...

    jQuery Bootstrap网格布局和列表布局切换代码

    4. **考虑响应式设计**:确保在不同屏幕尺寸下,切换功能仍能正常工作。可能需要针对不同的断点调整布局切换的逻辑。 这个例子仅仅是个起点,实际项目中可能需要根据具体需求进行扩展和优化。例如,可能需要保存...

    div模拟select自定义下拉列表框(jQuery)

    可以使用jQuery的`show()`和`hide()`方法来切换显示状态,还可以添加过渡效果增强用户体验。 三、具体实现步骤 1. 创建HTML结构: ```html &lt;div class="custom-select"&gt; &lt;div class="select-trigger"&gt;选择项&lt;/...

    网页设计div的显示和隐藏

    本文将详细介绍如何通过CSS属性(如`visibility`和`display`)以及JavaScript来实现div的显示与隐藏功能。 #### 一、CSS中的visibility属性 `visibility`属性用于控制元素的可见性,主要分为以下几种状态: 1. **...

    ASPnet(C#)中的DIV的显示隐藏问题

    ### ASP.NET中DIV的显示与隐藏技巧 在ASP.NET Web应用程序开发中,用户界面的动态控制是一项非常重要的技能。特别是对于那些需要根据用户操作或某些条件来改变显示内容的应用程序来说,能够有效地显示或隐藏控件是...

Global site tag (gtag.js) - Google Analytics