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

Posted 三云

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了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}中的对象信息,因此,上面showBlogsByViewsshowBlogsByLikes,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>

 

 



以上是关于java简单博客系统导航标签页点击后页面内容改变及背景色改变的主要内容,如果未能解决你的问题,请参考以下文章

JSP使用frame做部分页面内容改变

从一页导航到另一页后脚本未加载

博客系统前端实现

noteless的博客导航页 所有文章的导航页面

dede织梦文章页分页导航副标题如何删除标题后面带的#号

Spring Boot制作个人博客-博客管理列表页