js实现进入二级页面后仍然选中菜单栏中的某个菜单（二级页面与菜单栏绑定）_js菜单和url绑定_做一只会飞的象的博客

用到的知识点

1.addclass("active")，给菜单的class添加active属性；
2.var _sitemap = new Array();，定义一个数组，存入当前页面和第一级页面；
3.var w_url = window.location.href; ,获取当前页面的url；
4.parent()，获取当元素的直接父级元素；
5.object.entries(),返回一个数组，其元素是与直接在 object 上找到的可枚举属性键值对相对应的数组。属性的顺序与通过手动循环对象的属性值所给出的顺序相同。
<script>
    //获取当前页面url
    var w_url = window.location.href;
    //定义数组
     var _sitemap = new Array();
    //将二级页面和一级页面存入数组中，冒号左侧是二级及多级页面，右侧是一级页面
     _sitemap = {
          "http://www.baidu.net/XXX.html":"http://www.baidu.net/aaa.html",
          "http://www.baidu.net/CCC.html":"http://www.baidu.net/ddd.html",
     //根据url选中导航菜单
     //Object.entries()方法将_sitemap数组变为可枚举的键值对数组
     //var key of Object.entries(_sitemap) 结果是：       [["http://www.baidu.net/XXX.html","http://www.baidu.net/aaa.html"],["http://www.baidu.net/CCC.html","http://www.baidu.net/ddd.html"]]
     for(var key of Object.entries(_sitemap)){
        if (w_url == key[0]) {
            w_url = key[1]
    setTimeout(function(){
         $('#sidebar .nav li a').each(function () {
                        $(this).parent().removeClass("active");
                            $(this).parent().parent().parent().parent().addClass("active");
                            //打开当前页面所挨着的菜单的直接父级元素
                            $(this).parent().parent().parent().addClass("active");
                            $(this).parent().addClass("active");
                            //选中当前页面所紧挨着的菜单
                            $(this).addClass("active");
                            //如果菜单栏层级比较深，可以根据层级添加parent()个数
</script>
                     前言我们通常在点击左侧菜单栏的某个菜单后，会进入一个页面，并将该菜单选中高亮显示；但是往往在一个页面中，会链接到其他页面，通过第一个页面进入第二个页面后，怎么才能让该菜单仍然是选中且高亮显示的状态呢？用到的知识点1.addclass(&quot;active&quot;)，给菜单的class添加active属性；2.var _sitemap = new Array();，定义一个数组，存入当...
				学习了HTML、CSS和JavaScript后，总得做点东西练练手，于是干脆跟着效果做了个类似于慕课网的轮播效果，配上一个二级菜单导航，具体效果如下： 
首先来说说这个项目中用的比较多的知识点：
CSS定位——绝对定位和相对定位的搭配使用，用的非常多
JavaScript——实现三秒换图、按下按钮换图、按下小圆点换图、鼠标移动到主菜单上即显示二级菜单等功能
div块标签
首先是整个页面
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-...
				BootStrap框架下使用JS动态加载table并点击相关列弹出二级页面一级table动态加载二级table动态产生
在这里记录一下，也是在公司用到的一个例子，刚刚解决，正好趁热打铁。前端页面是采用BootStrap框架搭建的，主要的样式涉及到项目，在这里就不截图了，直接上代码：
一级table动态加载
jsp/html中的table代码：
<table id="data-table" class="table table-striped table-condensed" border="0"
				Vue和ElementUI是非常优秀的前端框架，能够辅助开发人员快速构建高效、美观的后台管理系统。其中，顶部一级菜单栏、左侧二级菜单栏是后台管理系统常见的设计模式，能够使用户快速定位到需要的功能，保证用户体验。下面，我就来阐述如何用Vue和ElementUI实现这样的菜单栏。
首先，在Vue中，路由是非常重要的。我们可以在router文件夹下新建一个index.js文件，配置路由信息。比如，我们可以定义如下代码：
import Vue from 'vue'
import Router from 'vue-router'
import Home from '@/views/Home.vue'
import About from '@/views/About.vue'
Vue.use(Router)
export default new Router({
  mode: 'history',
  routes: [
      path: '/',
      name: 'home',
      component: Home
      path: '/about',
      name: 'about',
      component: About
这样，我们就定义了两个路由：/为主页，/about为关于我们。接下来，我们在App.vue文件中引入ElementUI，并且实现菜单栏的布局。如下：
<template>
  <div id="app">
      <header>
          <h1>后台管理系统</h1>
          <el-menu :default-active="$route.path" class="el-menu-demo" mode="horizontal">
              <el-menu-item index="/">首页</el-menu-item>
              <el-menu-item index="/about">关于</el-menu-item>
          </el-menu>
      </header>
          <el-aside width="200px" style="background-color: #f2f2f2;">
              <el-menu :default-openeds="['1']" class="el-menu-vertical-demo" :unique-opened="true">
                  <el-submenu index="1">
                      <template slot="title">
                          <i class="el-icon-menu"></i>
                          <span>菜单一</span>
                      </template>
                      <el-menu-item-group title="分组一">
                          <el-menu-item index="/option1-1">选项1</el-menu-item>
                          <el-menu-item index="/option1-2">选项2</el-menu-item>
                      </el-menu-item-group>
                      <el-menu-item-group title="分组二">
                          <el-menu-item index="/option2-1">选项3</el-menu-item>
                          <el-menu-item index="/option2-2">选项4</el-menu-item>
                      </el-menu-item-group>
                  </el-submenu>
              </el-menu>
          </el-aside>
          <el-main>
              <router-view></router-view>
          </el-main>
      </main>
</template>
<script>
import 'element-ui/lib/theme-chalk/index.css'
import { Header, Menu, MenuItem, Submenu, MenuItemGroup, Main, Aside } from 'element-ui'
export default {
  name: 'App',
  components: {
    'el-header': Header,
    'el-menu': Menu,
    'el-menu-item': MenuItem,
    'el-submenu': Submenu,
    'el-menu-item-group': MenuItemGroup,
    'el-main': Main,
    'el-aside': Aside
</script>
通过以上代码，我们实现了一个简单的菜单栏的布局，其中包括了顶部一级菜单栏和左侧二级菜单栏。在菜单栏的实现中，我们使用了ElementUI提供的Menu、MenuItem、Submenu、MenuItemGroup等组件来快速搭建。
最后，我们需要在对应的页面组件中，与路由链接相对应的显示内容。以About.vue组件为例：
<template>
  <div class="about">
    <h1>This is an about page</h1>
    <p>这是关于我们的页面</p>
</template>
<script>
export default {
  name: 'about'
</script>
这样，我们就实现了一个简单的后台管理系统菜单栏，既美观又高效，为用户提供了良好的使用体验。当然，如果需要更加复杂的功能，我们需要在以上的代码结构上进行不断地扩展和完善。