菜单栏切换样式

 1 <%@ page contentType="text/html;charset=UTF-8" %>
 2 <%@ include file="/WEB-INF/views/include/taglib.jsp"%>
 3  <script type="text/javascript">
 4  $(document).ready(function () {
 5      $('#staticMenu li a').each(function () {
 6          if ($($(this))[0].href == String(window.location)){
 7              $("#staticMenu li a").removeClass("bactive");
 8              $(this).addClass('bactive');
 9          }
10      });
11  })
12  </script>
13 
14         <div class="col-md-12 p-x-0 navBarBG" id="staticMenu">
15             <ul class="nav nav-pills">
16                 <li class="nav-item">
17                     <a href="${ctx}/rsoa/proposal/proposalStatisticalChart" class='nav-link'>VC统计图</a>
18                 </li>
19                 <li class="nav-item">
20                     <a href="${ctx}/rsoa/statistics/proposalReasonList" class='nav-link'>按BB统计</a>
21                 </li>
22                 <li class="nav-item">
23                     <a href="${ctx}/rsoa/statistics/officeList" class='nav-link'>按AA统计</a>
24                 </li>
25                 <li class="nav-item">
26                     <a href="${ctx}/rsoa/statistics/categoryList" class='nav-link'>按DD别统计</a>
27                 </li>
28                 <li class="nav-item">
29                     <a href="${ctx}/rsoa/statistics/typeList" class='nav-link'>按EE型统计</a>
30                 </li>
31             </ul>
32         </div>

 

 


   +++++++++++++++在其他各个分页面可以引入公用菜单+++++++++++++

 

1 <div class="container-fluid navBar p-x-0">
2     <div class="row m-x">
3       <jsp:include page="/WEB-INF/views/modules/****/staticMenu.jsp"/>
4     </div>
5 </div>

 

转载于:https://www.cnblogs.com/skyislimit/p/5382208.html

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
Element UI 提供了一个灵活的导航组件 `el-menu`,用于创建左侧或顶部的菜单栏。如果你想实现在页面上切换左侧菜单,你可以按照以下步骤操作: 1. 在 Vue 项目中引入 Element UI,并安装所需的依赖: ```bash npm install element-ui --save ``` 2. 引入并注册 Element UI 全局样式和组件: ```javascript import { ElMenu, ElSubmenu } from 'element-plus'; import 'element-plus/lib/theme-chalk/index.css'; Vue.use(ElMenu); Vue.component('ElSubmenu', ElSubmenu); // 如果你需要子菜单 ``` 3. 创建一个包含多个 `ElMenuItem` 或 `ElSubmenu` 的 `el-menu` 组件,在模板中添加: ```html <template> <div> <el-menu default-active="1" :collapse="isCollapsed" @open="handleOpen" @close="handleClose"> <el-submenu index="1"> <template slot="title">一级菜单</template> <el-menu-item index="1-1">子菜单 1</el-menu-item> <el-menu-item index="1-2">子菜单 2</el-menu-item> </el-submenu> <el-menu-item index="2">二级菜单</el-menu-item> <!-- 更多菜单项... --> </el-menu> </div> </template> ``` 4. 定义控制菜单展开/折叠状态的方法(如 `isCollapsed` 和处理点击事件): ```javascript export default { data() { return { isCollapsed: true, // 初始折叠状态 }; }, methods: { handleOpen(index) { this.isCollapsed = false; // 展开 }, handleClose(index) { this.isCollapsed = true; // 折叠 }, }, }; ``` 5. 根据需要调整菜单结构和状态,例如可以通过路由变化动态更新 `default-active` 值,或者监听其他触发条件。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值