| ylbtech-Java-JSP：数据展示 |
| 1.返回顶部 |
1、
/** * 简介请求 * @return */ @RequestMapping("/JJ") public String jianjie(Model model){ List<Dict> list = dictService.getColumnByPlate("JJ"); List<Content> contentList = new ArrayList<>(); for (Dict dict : list) { //从每个栏目下获取第一条文章 List<Content> contents = contentService.queryByPlateAndColumn("JJ", dict.getCode(),1); contentList.add(contents.get(0)); } model.addAttribute("column",list); model.addAttribute("content",contentList); return "forward:/list_jianjie.jsp"; }
2、
<%@ page language="java" contentType="text/html; charset=utf-8" isELIgnored="false" pageEncoding="utf-8" %> <%@taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %> <% String path = request.getContextPath(); %> <!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=gb2312" /> <title>简介</title> <link type="text/css" rel="stylesheet" href="<%=path%>/css/list_jianjie.css"/> <script type="text/javascript" src="<%=path%>/js/jquery.min.js"></script> </head> <body> <!--头部 --> <%@ include file="header.jsp" %> <!--内容区 --> <div class="main clears"> <div class="con "> <div class="list_nav"><span>您的位置：<a class="spa" href="<%=path%>/index.jsp"target="_blank">首页</a> > 简介 </div> <div class="list_title"> <c:forEach var="item" items="${column}" varStatus="status"> <li class="title1 lt tab${status.count} active"><a href="#tab${status.count}"><span> ${item.value}</span></a></li> </c:forEach> <div class="title1 rt more "><a id="more" href="#"target="_blank"> 更多>></a></div> <div class=" hr clears" ></div> </div> <div class="list_con"> <c:forEach var="item" items="${content}" varStatus="status"> <div id="tab${status.count}" class="tab_content" style="display: block; "> <ul> ${item.content} </ul> </div> </c:forEach> </div> </div> </div> <div class="footertop"> <img src="<%=path%>/images/jianjie002.png"/> </div> <%@ include file="footer.jsp" %> </body> <script type="text/javascript"> $(document).ready(function() { //默认active $(".tab_content").hide(); //隐藏全部的tab菜单内容 $(".list_title li:first").addClass("active").show(); //对第一个li标签添加class="active属性" $(".tab_content:first").show(); //显示第一个tab内容 //点击事件 $(".list_title li").click(function() { $(".list_title li").removeClass("active"); //移除class="active"属性 $(this).addClass("active"); //添加class="active"到选择标签中 $(".tab_content").hide(); //隐藏全部标签内容 var activeTab = $(this).find("a").attr("href"); //找到所属属性值来识别活跃选项卡和内容 $(activeTab).fadeIn(); //使内容消失 return false; }); }); </script> </html>
3、
| 2.返回顶部 |
| 3.返回顶部 |
| 4.返回顶部 |
| 5.返回顶部 |
| 6.返回顶部 |
 |
作者：ylbtech 出处：http://ylbtech.cnblogs.com/ 本文版权归作者和博客园共有，欢迎转载，但未经作者同意必须保留此段声明，且在文章页面明显位置给出原文连接，否则保留追究法律责任的权利。 |