java简单博客系统(二)导航标签页点击后页面内容改变及背景色改变

一、同一个Servlet处理多个请求,显示不同的页面内容

导航标签页

bootStrap模板:

<ul class="nav nav-tabs">
  <li role="presentation" class="active"><a href="#">Home</a></li>
  <li role="presentation"><a href="#">Profile</a></li>
  <li role="presentation"><a href="#">Messages</a></li>
</ul>

在前面介绍到主页中这样用:

    <div class="blogNav">
        <ul class="nav nav-tabs" id="navUrl">
          <li role="presentation"><a href="Home?action=showByTime">首页</a></li>
          <li role="presentation"><a href="Home?action=showByViews">48小时阅读排行榜</a></li>
         <li role="presentation"><a href="Home?action=showByLikes">10天推荐排行榜</a></li>
    </ul>
    </div>

这个的关键是home,jsp中链接的href加了个action参数,这样一来,处理页面请求的HomeServlet(在web.xml中配置)中,就可以根据action参数的不同,调用不同的函数查询数据库,返回不同的博客信息放在请求属性中提供给前端获取:

    protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
        // TODO Auto-generated method stub
        request.setCharacterEncoding("utf-8");
        String action=request.getParameter("action");
        if(StringUtil.isNotEmpty(action)){
            if(action.equals("showByViews")){
                showBlogsByViews(request,response);
            }else if(action.equals("showByLikes")){
                showBlogsByLikes(request,response);
            }else if (action.equals("showByTime")){
                showBlogsByTime(request,response);
            }
        }else{
            showBlogsByTime(request,response);
        }
        showNavContent(request,response);
        request.getRequestDispatcher("home.jsp").forward(request, response);
    }
  

在前面说到的前端设计中,博客列表项总是获取${blogList}中的对象信息,因此,上面showBlogsByViews,showBlogsByLikes,showBlogsByTime,返回的请求参数明都是“blogList”,从而实现代码复用:

request.setAttribute("blogList", viewsBlogList);//action不同,设置的blogList内容不同

(二)点击导航标签页后背景色保持不变知道点击另一个标签页

重新看下bootstrap导航标签模板,活跃状态的标签页有class属性,取值为active。

 <li role="presentation" class="active"><a href="#">Home</a></li>

为了实现想要的页面效果,在html页面加载出来后,判断当前URL的参数,根据参数的不同,设置背景色

参数action="showByTime" ——“首页“ 为active状态

参数action="showByViews" ——“48小时阅读排行榜为active状态"

参数action="showByLikes"——“10天推荐排行榜为active状态”

<script type="text/javascript">
    window.onload=function(){
        //var currentPath=location.pathname;   /*获取的是连接地址/Blog/Home
        var paramsObj=location.search;       /*获取的是链接参数 ?action=action=showByLikes*/
        var navAs=document.getElementById("navUrl").getElementsByTagName("a");
        if(paramsObj!=null&&paramsObj!=""){
            var paramsStr=paramsObj.substring((paramsObj.indexOf("?")+1));   /*截取问号之后的字符串action=showByLikes*/
            var paramsArr=new Array();
            paramsArr=paramsStr.split("&");  /*多个参数会以&分隔开*/
            var actionParam=paramsArr[0].split("=")[1];    /*获取第一个参数action=showByLikes并以"="号分离出showByLikes*/
            var find=0;
            for(var i=0;i<navAs.length;i++){
                if(navAs[i].href.indexOf(actionParam)!=-1){
                    navAs[i].parentNode.className="active";
                    find=true;
                    break;    /*遍历导航标签的所有链接找到包含当前url的actio参数值的,找到就调出循环*/
                }
            }
            if(!find){
                navAs[0].parentNode.className="active";//默认首页标签是active状态
            }
        }else{
            navAs[0].parentNode.className="active";
        }

    };  //脚本用于点击不同链接是导航栏标签背景色的变化
</script>

原文地址:https://www.cnblogs.com/sanyun/p/9950038.html

时间: 2024-10-06 13:38:24

java简单博客系统(二)导航标签页点击后页面内容改变及背景色改变的相关文章

Java简单博客系统(二)静态页面动态化显示数据表内容

(一)准备工作 建立java Web项目基础的四个package 将JSP相关库和MySQL数据驱动包放到相应的目录 下面列出com.java.util中的三个类的代码,在项目中经常用到,基本是参照java1234.com小锋老师的项目代码稍作写出来的. public class DbUtil { //定义获取数据库连接的方法 private String dburl="jdbc:mysql://127.0.0.1:3306/db_blog?useSSL=false&serverTime

java基于MVC的简单博客系统

原文:java基于MVC的简单博客系统 源代码下载地址:http://www.zuidaima.com/share/1550463595760640.htm 采用技术:jsp+servlie+javaBean+mysql+ajax

一个超漂亮的Java版博客系统,内置14套皮肤,已经转化为标准的Eclipse项目,直接导入即可

原文:一个超漂亮的Java版博客系统,内置14套皮肤,已经转化为标准的Eclipse项目,直接导入即可 源代码下载地址:http://www.zuidaima.com/share/1550463745002496.htm MrZhao只分享精品,话不多说,直接上图      - 为了压缩文件我把WEB-INF下面的lib包打包放在网盘下载地址:http://pan.baidu.com/s/1hqqqWOc - 把lib解压进去以后项目直接导入Eclise即可运行 - 数据库Mysql,确保一个新

ssm框架整合(java个人博客系统)

个人博客系统:基于Spring+Spring MVC+Mybatis(Maven构建) 1.该个人博客系统是我学习SSM框架的一个Demo,前端使用了Bootstrap,Jquery,大量使用ajax.可以作为大家整合SSM框架的一个参考. 2.项目截图: 3.源码 https://github.com/withstars/Blog-System

java jsp多用户博客系统源代码下载

原文:java jsp多用户博客系统源代码下载 源代码下载地址:http://www.zuidaima.com/share/1550463407606784.htm java多用户博客系统(MVC),是采用javabean+servlet+jsp技术,同时运用了javascript,css+div,ajax技术.以Mysql数据库,tomcat6为服务器. 官方验证: 项目截图 首页http://localhost:端口/项目/ 注册http://localhost:端口/项目/register

Python课程的期末项目--实现了一个及其简单的个人博客系统

目录 1. 项目简介 1.1 本项目博客地址 1.2 项目的的功能与特色 1.3 项目采取的技术栈 1.4 项目借鉴源代码的github地址或博客地址 1.5 团队成员任务分配表 2. 前期调查与需求分析 3. 项目功能架构图.主要功能流程图 4. 系统模块说明 4.1 系统中包含的模块列表 4.2 系统各模块详细描述 4.2.1 分页功能 4.2.2 标签功能 5.项目总结 5.1 系统特点 5.2 系统不足与可改进的地方 1. 项目简介 1.1 本项目博客地址 https://www.cnb

从入门到放弃,.net构建博客系统(二):依赖注入

文章目录:<从入门到放弃,.net构建博客系统> 从入门到放弃,.net构建博客系统(一):系统构建 从入门到放弃,.net构建博客系统(二):依赖注入 上一篇中有讲到项目启动时会进行ioc的依赖注入,但具体是怎么注入的呢?我们先一步步往下走 一.注册autofac配置 首先bootstraper会进行初始化,接着将当前mvc控制器工厂改为AutofacControllerFactory. 1 public class AutofacConfig 2 { 3 /// <summary&g

Asp.net博客系统收集和简单介绍

国内Asp.net博客系统收集和简单介绍 [转载文章,仅供个人参考,引自http://www.soyaoo.com/Blog/post/92.html] 1.ZJ-Blog程序简介:基于ASP.net 1.1环境开发的单用户博客程序,支持Access和MySQL两种数据库,其最大的特点是采用.net开发并大量的使用了Ajax技术,本人还没用使用过此程序但是直觉上觉得大量应用Ajax也未必是一件好事,个人觉得给用户适当的体验或许更能引起用户的兴趣.当然用户其实最关心的并非是这些技术问题,而是程序的

NodeJS+Express+MongoDB 简单个人博客系统【Study笔记】

Blog 个人博客系统 iBlog是在学习NodeJs时候一个练手项目Demo 系统支持用户注册/登录,内容文章查看,评论,后台管理(定制显示的分类版块,进行文章内容添加)超级管理员还可进行用户管理等 目前只是做了一个比较粗糙的版本,跑通主线模块及部分功能 //通过这个个人练手项目的完成,算是对NodeJs 结合Express 进行Web开发有了一定的认识和理解,路漫漫...还有很多需要去Do 系统还存在很多不稳定及大刀修改的地方[大虾勿喷勿笑] 比较适合刚接触NodeJs 这块的同学,可以当做