下列代码中
点击功能模块跳转不了，请考虑使用超链接
href生成：“<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8" import="javax.servlet.http.HttpServletRequest"%>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>系统导航菜单</title>
<!-- 引入EasyUI资源 -->
<link rel="stylesheet" type="text/css"
href="${pageContext.request.contextPath}/easyui/themes/default/easyui.css">
<link rel="stylesheet" type="text/css"
href="${pageContext.request.contextPath}/easyui/themes/icon.css">
<script type="text/
javascript" src="${pageContext.request.contextPath}/easyui/jquery.min.js"></script>
<script type="text/
javascript" src="${pageContext.request.contextPath}/easyui/jquery.easyui.min.js"></script>
<style>
.menu-container {
padding
: 5px;
}
.menu-title {
font-weight
: bold;
color
: #2c3e5
0;
padding
: 8px 5px;
border-bottom
: 1px dashed
#eee;
}
.menu-item {
margin
: 3px
0;
}
.menu-item a {
display
: block;
padding
: 8px 5px 8px 25px;
text-decoration
: none;
color
: #34495e;
transition
: all
0.3s;
}
.menu-item a
:hover {
background-color
: #ecf
0f1;
color
: #3498db;
}
.menu-section {
margin-bottom
: 15px;
}
</style>
</head>
<body>
<div class="easyui-accordion" data-options="fit
:true,border
:false">
<!-- 商品管理模块 -->
<div title="商品管理" data-options="iconCls
:&
#39;icon-product&
#39;" style="overflow
:auto;">
<div class="menu-container">
<div class="menu-item">
<a
href="
javascript:void(0)" onclick="addTab
(&
#39;商品列表&
#39;,&
#39;../proinfomgmt/ProInfolist.jsp&
#39;)">
<span class="icon icon-list" style="display
:inline-block;width
:16px;"></span>
商品基本信息列表
</a>
</div>
<div class="menu-item">
<a
href="
javascript:void(0)" onclick="addTab
(&
#39;商品查询&
#39;,&
#39;../proinfomgmt/QueryProInfoSelectVal.jsp&
#39;)">
<span class="icon icon-search" style="display
:inline-block;width
:16px;"></span>
商品列表查询
</a>
</div>
<div class="menu-item">
<a
href="
javascript:void(0)" onclick="addTab
(&
#39;商品查询&
#39;,&
#39;../proinfomgmt/QueryProInfo.jsp&
#39;)">
<span class="icon icon-filter" style="display
:inline-block;width
:16px;"></span>
查询商品基本信息
</a>
</div>
<div class="menu-item">
<a
href="
javascript:void(0)" onclick="addTab
(&
#39;多条件查询&
#39;,&
#39;../proinfomgmt/QueryProInfoMultConds.jsp&
#39;)">
<span class="icon icon-advanced-search" style="display
:inline-block;width
:16px;"></span>
多条件查询商品
</a>
</div>
<div class="menu-item">
<a
href="
javascript:void(0)" onclick="addTab
(&
#39;添加商品&
#39;,&
#39;../proinfomgmt/AddProInfo.jsp&
#39;)">
<span class="icon icon-add" style="display
:inline-block;width
:16px;"></span>
添加商品基本信息
</a>
</div>
<div class="menu-item">
<a
href="
javascript:void(0)" onclick="addTab
(&
#39;商品维护&
#39;,&
#39;../proinfomgmt/ProInfolistforModi.jsp&
#39;)">
<span class="icon icon-edit" style="display
:inline-block;width
:16px;"></span>
修改或删除商品
</a>
</div>
</div>
</div>
<!-- 库存管理模块 -->
<div title="库存管理" data-options="iconCls
:&
#39;icon-inventory&
#39;" style="overflow
:auto;">
<div class="menu-container">
<div class="menu-item">
<a
href="
javascript:void(0)" onclick="addTab
(&
#39;库存列表&
#39;,&
#39;../invinfomgmt/Invinfolist.jsp&
#39;)">
<span class="icon icon-list" style="display
:inline-block;width
:16px;"></span>
库存信息列表
</a>
</div>
<div class="menu-item">
<a
href="
javascript:void(0)" onclick="addTab
(&
#39;库存查询&
#39;,&
#39;../invinfomgmt/QueryInvInfoMultConds.jsp&
#39;)">
<span class="icon icon-search" style="display
:inline-block;width
:16px;"></span>
多条件查询库存
</a>
</div>
<div class="menu-item">
<a
href="
javascript:void(0)" onclick="addTab
(&
#39;库存查询&
#39;,&
#39;../invinfomgmt/QueryInvInfoSelectVal.jsp&
#39;)">
<span class="icon icon-filter" style="display
:inline-block;width
:16px;"></span>
库存列表查询
</a>
</div>
</div>
</div>
<!-- 入库管理模块 -->
<div title="入库管理" data-options="iconCls
:&
#39;icon-inbound&
#39;" style="overflow
:auto;">
<div class="menu-container">
<div class="menu-item">
<a
href="
javascript:void(0)" onclick="addTab
(&
#39;添加入库&
#39;,&
#39;../Inbinfomgmt/AddInbInfo.jsp&
#39;)">
<span class="icon icon-add" style="display
:inline-block;width
:16px;"></span>
添加入库信息
</a>
</div>
<div class="menu-item">
<a
href="
javascript:void(0)" onclick="addTab
(&
#39;入库维护&
#39;,&
#39;../Inbinfomgmt/InbInfolistforModi.jsp&
#39;)">
<span class="icon icon-edit" style="display
:inline-block;width
:16px;"></span>
修改或删除入库
</a>
</div>
</div>
</div>
<!-- 出库管理模块 -->
<div title="出库管理" data-options="iconCls
:&
#39;icon-outbound&
#39;" style="overflow
:auto;">
<div class="menu-container">
<div class="menu-item">
<a
href="
javascript:void(0)" onclick="addTab
(&
#39;添加出库&
#39;,&
#39;../Outinfomgmt/AddOutInfo.jsp&
#39;)">
<span class="icon icon-add" style="display
:inline-block;width
:16px;"></span>
添加出库信息
</a>
</div>
<div class="menu-item">
<a
href="
javascript:void(0)" onclick="addTab
(&
#39;出库维护&
#39;,&
#39;../Outinfomgmt/OutInfolistforModi.jsp&
#39;)">
<span class="icon icon-edit" style="display
:inline-block;width
:16px;"></span>
修改或删除出库
</a>
</div>
</div>
</div>
<!-- 用户管理模块（带权限控制） -->
<%
String operator_id =
(String) request.getSession
().getAttribute
("user");
if
("U2
0234
0848".equals
(operator_id)) {
%>
<div title="系统管理" data-options="iconCls
:&
#39;icon-system&
#39;" style="overflow
:auto;">
<div class="menu-container">
<div class="menu-item">
<a
href="
javascript:void(0)" onclick="addTab
(&
#39;员工密码重置&
#39;,&
#39;../userinfomgmt/UserInfolistforModi_1.jsp&
#39;)">
<span class="icon icon-lock" style="display
:inline-block;width
:16px;"></span>
员工重置密码
</a>
</div>
<div class="menu-item">
<a
href="
javascript:void(0)" onclick="addTab
(&
#39;添加员工&
#39;,&
#39;../userinfomgmt/AddUserInfo.jsp&
#39;)">
<span class="icon icon-user-add" style="display
:inline-block;width
:16px;"></span>
管理员添加员工
</a>
</div>
<div class="menu-item">
<a
href="
javascript:void(0)" onclick="addTab
(&
#39;员工列表&
#39;,&
#39;../userinfomgmt/UserInfolist_1.jsp&
#39;)">
<span class="icon icon-user-list" style="display
:inline-block;width
:16px;"></span>
管理员查看员工
</a>
</div>
<div class="menu-item">
<a
href="
javascript:void(0)" onclick="addTab
(&
#39;员工维护&
#39;,&
#39;../userinfomgmt/UserInfolistforModi.jsp&
#39;)">
<span class="icon icon-user-edit" style="display
:inline-block;width
:16px;"></span>
员工信息维护
</a>
</div>
<div class="menu-item">
<a
href="
javascript:void(0)" onclick="addTab
(&
#39;员工查询&
#39;,&
#39;../userinfomgmt/QueryUserInfoSelectVal.jsp&
#39;)">
<span class="icon icon-search" style="display
:inline-block;width
:16px;"></span>
查询员工信息
</a>
</div>
<div class="menu-item">
<a
href="
javascript:void(0)" onclick="addTab
(&
#39;精准查询&
#39;,&
#39;../userinfomgmt/QueryUserInfo.jsp&
#39;)">
<span class="icon icon-filter" style="display
:inline-block;width
:16px;"></span>
精准查询员工
</a>
</div>
</div>
</div>
<% } else { %>
<div title="个人设置" data-options="iconCls
:&
#39;icon-user&
#39;" style="overflow
:auto;">
<div class="menu-container">
<div class="menu-item">
<a
href="
javascript:void(0)" onclick="addTab
(&
#39;密码重置&
#39;,&
#39;../userinfomgmt/UserInfolistforModi_1.jsp&
#39;)">
<span class="icon icon-lock" style="display
:inline-block;width
:16px;"></span>
重置我的密码
</a>
</div>
</div>
</div>
<% } %>
</div>
<script>
// 添加选项卡函数
function addTab
(title, url){
if
($
(&
#39;
#mainTabs&
#39;).tabs
(&
#39;exists&
#39;, title)){
$
(&
#39;
#mainTabs&
#39;).tabs
(&
#39;select&
#39;, title);
} else {
$
(&
#39;
#mainTabs&
#39;).tabs
(&
#39;add&
#39;,{
title
: title,
href: url,
closable
: true,
bodyCls
: &
#39;tab-content&
#39;
});
}
}
// 初始化手风琴菜单
$
(function
(){
$
(&
#39;.easyui-accordion&
#39;).accordion
();
});
</script>
</body>
</html>
”
本文通过两个示例展示了不同锚点链接的点击效果。一种点击链接后不会导致页面滚动到顶部，另一种则会使页面返回顶部。这对于理解网页导航与用户体验至关重要。
扫一扫
3090
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
