`
jackroomage
  • 浏览: 1197910 次
  • 性别: 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
分享到:
评论

相关推荐

    100多个JQuery效果示例(实例)div+css+javascrpit

    4. jquery+div实现同时滑动切换的图文展示特效插件下载 5. jquery+div带动画按钮图片手动与自动切换的特效代码 6. jquery一页多用的飞飞图片幻灯插件演示 7. jquery仿flash产品图片多角度展示特效代码 8. jquery...

    javascript点击按钮实现隐藏显示切换效果

    在不少应用中,都有这样的功能,点击同一个按钮可以实现一个元素的显示和隐藏的切换,下面就通过代码实例介绍一下如何实现此效果,代码如下: &lt;html&gt; &lt;head&gt; &lt;meta charset=gb2312&gt; &lt;title&gt...

    JavaScript_JQuery_CSS_CSS_DIV漂亮的实例123个

    4. jquery+div实现同时滑动切换的图文展示特效插件下载 5. jquery+div带动画按钮图片手动与自动切换的特效代码 6. jquery一页多用的飞飞图片幻灯插件演示 7. jquery仿flash产品图片多角度展示特效代码 8. ...

    JQuery&CSS;&CSS;+DIV实例大全.rar

    5.jquery+div带动画按钮图片手动与自动切换的特效代码 6.jquery一页多用的飞飞图片幻灯插件演示 7.jquery仿flash产品图片多角度展示特效代码 8.jquery仿flash图片放大相册的插件代码(Zoomer Gallery)下载 9...

    非常漂亮的100个 jquery前端案例,包含幻灯片切换、图片缩放、相册、放大镜、图片拖着滚动等.zip

    jquery+div实现同时滑动切换的图文展示特效插件下载 jquery+div带动画按钮图片手动与自动切换的特效代码 jquery一页多用的飞飞图片幻灯插件演示 jquery仿flash产品图片多角度展示特效代码 jquery仿flash图片放大相册...

    轮播图的实现(自动轮播+左右按钮切换和点选切换)

    一般情况下,你可以使用`&lt;div&gt;`元素作为轮播图容器,并在其中创建其他子元素来显示轮播图片和控制按钮。 2. CSS样式:通过CSS来美化轮播图的外观和布局。你可以设置容器元素的宽度、高度和布局方式,以及图片的位置...

    JavaScript_JQuery_CSS_DIV漂亮的实例

    4. jquery+div实现同时滑动切换的图文展示特效插件下载 5. jquery+div带动画按钮图片手动与自动切换的特效代码 6. jquery一页多用的飞飞图片幻灯插件演示 7. jquery仿flash产品图片多角度展示特效代码 8. jquery...

    漫言阁个人博客 v4.0 Beta 1.rar

    1、增加换肤风格切换功能 2、增加167首音乐播放功能 3、增加热门日志功能 4、增加精华日志功能 5、增加首页显示最新日志功能 6、增加隐藏或显示侧边栏功能 7、增加繁体简体随意切换功能 8、相册功能,在线...

    DotNetTextBox3.5.0多功能在线文本编辑器

    *文件管理列表自动识别的文件图标显示! *更强大的上传管理功能,提供更多的文件管理功能! *更多强大的功能以及新的核心结构! *对各种浏览器的兼容性更佳! *提供全新的水印在线控制功能,方便用户更快速控制上传图片的...

    JS实现的tab切换并显示相应内容模块功能示例

    本文实例讲述了JS实现的tab切换并显示相应内容模块功能。分享给大家供大家参考,具体如下: 思路:一层循环遍历操作的元素并获取当前遍历到的元素的下标,通过下标去选择显示对应的内容模块。 二层循环将元素恢复...

    div+css网站静态模板

    此为静态模板,含时间(农历)显示,二级下拉弹出菜单,幻灯片播放,栏目导航切换,视频播放,图片无缝滚动等,是一个非常漂亮、功能较齐全的模板 演示地址:http://yangqq.com/ceshi/travel/index.html

    vue.js+elementUI实现点击左右箭头切换头像功能(类似轮播图效果)

    主要介绍了vue.js+elementUI实现点击左右箭头切换头像功能(类似轮播图),本文通过实例代码给大家介绍的非常详细,具有一定的参考借鉴价值,需要的朋友可以参考下

    JS简单实现tab切换效果的多窗口显示功能

    本文实例讲述了JS简单实现tab切换效果的多窗口显示功能。分享给大家供大家参考,具体如下: &lt;div xss=removed&gt; &lt;div class=menubox&gt; &lt;span id=newstab1 class=hover xss=removed&gt; 科室新闻&lt;/a&gt;&lt;/span&gt; &lt;span ...

    vue实现select下拉显示隐藏功能

    今日,怂怂就来说说,在项目中刚遇到这么一个功能需求; 描述:当下拉选择不同的属性选项,需展示对应的内容界面; select下拉菜单如下: 当下拉选择【表结构变更】、即展示如下界面: 当下拉选择【接口变更】、即...

    Vue基于iview实现登录密码的显示与隐藏功能

    近期,在使用abp开发项目过程中,前端vue输入登录密码时默认隐藏,但是如果用户输错密码需要切换显示跟隐藏。故有此文。 2.实现最终效果 2.1 隐藏密码   2.2 显示密码   显示密码需要点击密码框左侧眼睛 3.实现...

    基于Vue实现支持按周切换的日历

    基于Vue的日历小功能,可根据实际开发情况按每年、每月、每周、进行切换,具体内容如下 &lt;div class=date&gt; &lt;!-- 年份 月份 --&gt; &lt;div class=month&gt; &lt;p&gt;{{ currentYear }}年{{ currentMonth }}月 &lt;/div&gt; ...

    静态网站模板 div+css 简单静态网站

    此为静态模板,含时间(农历)显示,二级下拉弹出菜单,幻灯片播放,栏目导航切换,视频播放,图片无缝滚动等,是一个非常漂亮、功能较齐全的模板 演示地址:http://yangqq.com/ceshi/travel/index.html

    jquery 动态示例

    4. jquery+div实现同时滑动切换的图文展示特效插件下载 5. jquery+div带动画按钮图片手动与自动切换的特效代码 6. jquery一页多用的飞飞图片幻灯插件演示 7. jquery仿flash产品图片多角度展示特效代码 8. jquery...

    DIV BLOG v0.6

    更新说明: 增加CSS风格选择功能 增加了一套BLOG模板,可以随意切换 修正发表评论时默认注册的BUG 修正修改资料的错误 修正注册错误BUG 修正CSS显示兼容性问题 提高BLOG安全性 默认...

    Ecshop韩都衣舍2014最新豪华版v2.7.3

    顶级分类页调用该分类下精品商品排行,左右切换滚动特效,头部购物车鼠标移入显示购物车商品,首页分类下方调用各分类商品,并且商品有立即购买功能,列表页左侧商品分类默认商品展开状态,点击哪个分类进入此页面,...

Global site tag (gtag.js) - Google Analytics