列表显示的切换功能（div）

最新推荐文章于 2021-08-15 01:27:56 发布
原创 最新推荐文章于 2021-08-15 01:27:56 发布 · 219 阅读 · 0 ·
CC 4.0 BY-SA版权
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
文章标签：

#HTML

该页面展示了一个使用HTML和Java实现的年度期刊导航栏示例。通过点击不同年份的链接，可以切换显示相应年度的内容。此示例中包含了2010年、2009年及2008年的期刊数据。

摘要生成于 C知道 ，由 DeepSeek-R1 满血版支持， 前往体验 >

<%@ 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>

 

web 列表切换
晨曦雨露的博客
01-03 825
原理：通过js更改class从而实现切换效果。 html：
实用的列表切换
Mak
07-19 924
列表切换可以给用户更好的用户体验，解决因内容区域太多而导致的浏览麻烦，列表切换可以节省文章的篇幅，用户可以凭自己的喜好去选择哪一种浏览方式语言及要点 应用js的jQuery框架 通过children() 获取ul的子元素 removeClass() , addClass() HTML代码<!DOCTYPE html> <html lang="en"> <head> <meta char
HTML 列表切换
AQ_xiaobin的博客
07-19 1334
列表切换
列表的内容依次切换显示
weixin_30410999的博客
01-19 224
效果：http://runjs.cn/code/cahcrllk <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>fade away</title> <style> ...
前端常用效果（2）带效果的tab切换
weixin_34319817的博客
06-26 434
先上效果, 代码引用了jquery的框架 复制代码 功能实现比较简单，代码如下所示： html代码如下 <div class='tabchouse'> <!--设置元素位置--> <ul> <!--元素内容--> <li class='act...
html中列表显示,html – * css规则正在改变我的列表在div中的显示方式
weixin_34300871的博客
06-21 152
I’m trying to put a list into a div, while using * to eliminate unwanted space within and around the div. By doing this, the lists are no longer staying in the div. What do I need to do to get the lis...
点击标签切换和自动切换DIV选项卡
12-09
在网页设计中，实现选项卡切换功能是一种常见的交互方式，让用户能够轻松地在多个相关但内容不同的区域之间导航。在给定的代码中，我们看到了一个利用HTML、CSS和JavaScript实现的点击标签切换和自动切换的DIV选项卡...
Vue切换div显示隐藏,多选，单选代码解析
10-15
通过上述文件信息，我们可以了解到Vue在切换div显示隐藏、实现多选和单选功能时的代码解析。 知识点： 1. Vue中切换div显示隐藏的基本实现： Vue通过v-if和v-else指令来控制元素的显示和隐藏。文档中展示了一个...
纯div+css轮播图片切换图片
11-07
图片切换是通过CSS控制图片的显示和隐藏，实现图片的动态变化。这通常涉及到CSS的`display`属性，通过改变图片的可见状态来实现切换。例如，可以创建多个包含图片的div，然后利用CSS选择器和定时器来交替更改这些div...
js控制div左右切换带左右箭头
11-05
在切换`div`时，可能需要修改某个`div`的`class`以显示或隐藏，或者调整其在容器中的位置。 6. **动画效果**：为了使切换更流畅，通常会使用CSS的`transition`或JavaScript的动画库（如jQuery的`animate`方法）来...
js实现div的切换特效上一个下一个
10-26
这个过程实际上是一个遍历数组的过程，通过数组的索引来控制div元素的显示和隐藏，实现一个简单的切换效果。在实际应用中，可能还需要考虑动画效果，可以让div的显示和隐藏更加平滑和自然，从而提高用户体验。这可以...
一个div中许多列表，使用全局，将数据显示到页面
小小程序猿
06-22 1684
var pricelist; // 加载资源售价 function price(){ informationDataController.getPriceList(function(data){ if(data.resultObject != null){ pricelist = data.resultObject;
多种方法解决多个div并排显示的问题
weixin_43912081的博客
08-15 1万+
平时做项目中总是能碰到让多个div显示在一排的问题 例如： 将上图显示为: 其实有很多种方法都可解决此问题 在这里做一下总结 一、使用 display 也就是说块元素占用了全部宽度，前后会带有换行符，会自动的在一行显示，而内联元素只需要设置宽度，不会带有换行符，也就是默认不换行 那么我们就可以考虑把 div 这种块元素转换为内联元素 即可实现 div 在一行显示，就可达到我们的目的 display有很多属性值 如下： none：隐藏对象。与visibility属性的hidden值不同，其不为被隐藏的对
html卡片和列表切换怎么做,个人信息卡片列表样式切换页面详解
weixin_42309178的博客
06-09 1840
#先随便说说先来看看长什么样子(动态图可能加载会慢一点):先看怎么写，源码放在了github上本文最后会有链接可以做个参考。#HTML结构还是简单的HTML结构(我写的HTML结构都很简单哈哈)//注意看图片中的文字。具体的样式自己随意发挥就好。这里有一个CSS的知识，就是background添加图片并且可以设置坐标，具体可以看看这篇文章CSS中背景图片定位方法，这个页面的右上角两个按钮就是用这个...
html之标签切换内容变化
Quincy.Coder的博客
09-26 9488
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>标签切换</title> <style> * { padding: 0; } .main-div { text-align: center;
DIV实现的逐张图片切换特效教程
5. 控制图片切换逻辑：需要确保图片能够一张接一张地显示，图片切换可以通过改变`<div>`元素的`src`属性（图片路径）来实现。同时，还可以通过JavaScript控制显示的图片索引，以及切换的动画效果。 6. 用户交互处理...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值