html之间跳转获取地址栏中参数util.js

1.文件util.js

function getQueryString(name){
    let reg = new RegExp("(^|&)"+ name +"=([^&]*)(&|$)");
    let r = window.location.search.substr(1).match(reg);
    if(r!=null)return unescape(r[2]); return null;
}


// 对Date的扩展,将 Date 转化为指定格式的String
// 月(M)、日(d)、小时(h)、分(m)、秒(s)、季度(q) 可以用 1-2 个占位符,
// 年(y)可以用 1-4 个占位符,毫秒(S)只能用 1 个占位符(是 1-3 位的数字)
// 例子:
// (new Date()).Format("yyyy-MM-dd hh:mm:ss.S") ==> 2006-07-02 08:09:04.423
// (new Date()).Format("yyyy-M-d h:m:s.S")      ==> 2006-7-2 8:9:4.18
Date.prototype.Format = function (fmt) { //author: meizz
    var o = {
        "M+": this.getMonth() + 1, //月份
        "d+": this.getDate(), //日
        "h+": this.getHours(), //小时
        "m+": this.getMinutes(), //分
        "s+": this.getSeconds(), //秒
        "q+": Math.floor((this.getMonth() + 3) / 3), //季度
        "S": this.getMilliseconds() //毫秒
    };
    if (/(y+)/.test(fmt)) fmt = fmt.replace(RegExp.$1, (this.getFullYear() + "").substr(4 - RegExp.$1.length));
    for (var k in o)
        if (new RegExp("(" + k + ")").test(fmt)) fmt = fmt.replace(RegExp.$1, (RegExp.$1.length == 1) ? (o[k]) : (("00" + o[k]).substr(("" + o[k]).length)));
    return fmt;
}

2.引用

<script src="/js/util.js"></script>
<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%> <%@ page import="java.text.SimpleDateFormat" %> <%@ page import="java.util.Date" %> <%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c" %> <!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>大学生兼职系统</title> <style> * { margin: 0; padding: 0; } /* 顶部图片样式 */ .top-image { width: 100%; height: 400px; overflow: hidden; } .top-image img { width: 100%; height: auto; } /* 导航栏样式 */ .nav { height: 40px; border-bottom: 1px solid white; background-color: skyblue; line-height: 40px; display: flex; align-items: center; justify-content: space-between; } .nav h1, .nav h3 { padding: 0 20px; font-size: 18px; color: black; white-space: nowrap; } .nav a { text-decoration: none; padding: 0 20px; font-size: 18px; color: white; white-space: nowrap; transition: all 0.3s; } .nav a:hover { background-color: pink; padding: 5px 25px; } .nav a.active { font-weight: bold; background-color: pink; color: white; } .nav a#logout { background-color: greenyellow; border-radius: 5px; margin-right: 10px; } .navbar-time { margin-right: 20px; color: white; } </style> </head> <body> <!-- 顶部图片 --> <div class="top-image"> < img src="${pageContext.request.contextPath }/statics/images/head.jpg"> </div> <script> document.addEventListener('DOMContentLoade当点击个人中心时,active样式没有跳转到个人中心上
最新发布
03-21
从您的描述来看,您希望点击“个人中心”链接时能够正常跳转并同时应用 `active` 样式。但是目前存在一个问题:尽管样式能短暂地更新为 `active`,但实际上并没有正确跳转到目标页面。 以下是解决问题的具体分析及解决办法: --- ### **1. 确认 HTML 结构是否正确** 确保导航栏中的每个链接都有明确的 `href` 属性指向相应的页面。例如,“个人中心”的链接应该类似如下形式: ```html <a href="personalCenter.jsp" class="nav-link">个人中心</a> ``` 如果没有指定有效的 URL 地址,则不会发生页面跳转。 --- ### **2. 检查 JavaScript 功能是否有冲突** 如果使用了类似于以下这种阻止默认行为 (`event.preventDefault()`) 的代码段, 那么虽然可以更改样式但会阻碍正常的超链路访问功能。 **修正版示例代码:** ```javascript document.addEventListener('DOMContentLoaded', function () { const navLinks = document.querySelectorAll('.nav-link'); navLinks.forEach(link => { link.addEventListener('click', function (e) { // 先移除所有已有的 active 类别 navLinks.forEach(navLink => navLink.classList.remove('active')); // 再给予当前点击元素新的 active 类别标识 this.classList.add('active'); // 这里不再手动处理跳转逻辑,恢复原生 a 标签的行为。 return true; // 放行让浏览器自行执行默认操作 - 即跳转至相应地址 }); }); }); ``` 说明: 删除掉原先用于拦截点击事件的部分(`preventDefault()`), 让用户的点击动作自然生效即浏览新网页的过程继续下去;只保留对界面交互部分(如增加或减少class)的操作。 --- ### **3. 后端配合设置 Active Class(更推荐)** 另一种更好的做法是在服务器端生成 HTML 时候就根据请求路径确定哪些链接应该是活动状态。比如对于 JSP 应用来说可以在每页加入如下判断条件来动态插入 "active": ```jsp <c:set var="currentUrl" value="${pageContext.request.servletPath}" /> <nav> <ul> <!-- 主页 --> <li><a href="<%=request.getContextPath()%>/index.jsp" class="nav-link ${currentUrl eq '/index.jsp' ? 'active':''}">主页</a></li> <!-- 个人信息 --> <li><a href="<%=request.getContextPath()%>/personalCenter.jsp" class="nav-link ${currentUrl eq '/personalCenter.jsp' ? 'active': ''}">个人中心</a></li> ...... </ul> </nav> ``` 这种方式的好处在于避免了完全依赖于客户端脚本来维护 UI 上的状态同步问题,并且使得搜索引擎更容易理解网站内容结构。 --- ### **最终建议** 优先选择第三种方法,由服务端控制哪一部分菜单处于激活状态更为稳定可靠。而第二种仅适用于不需要考虑 SEO 效果的小型单页面应用程序内局部调整需求场景下偶尔采用一下也无妨。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值