结合Django项目实现

实现步骤：

  • html页面部分，使用bootstrap.css中的样式（不用可忽略，主要class样式），要引用bootstrap.css，使用到actvie样式；
      <link href="../../static/css/bootstrap.css" rel="stylesheet" media="screen">
  • 从views.py层，保存到cookie，返回到cookie，这个主要为带默认id，展示默认模块的数据；
  • Js设置指定模块下的li的onclick触发的方法，通过js移除和添加li的样式　　

具体实现步骤：

1、Views层，返回数据

2、Html页面具体的代码，不使用到if判断，可去掉if判断，直接循环显示li

3、Js方法部分，设置当id为Page_tree中的li，触发点击方法时，将这个li同级的移除掉active样式，给这个li增加active样式

4、实现效果：

Js 实现导航li列表，选中时，显示选中样式的更多相关文章

  1. JS检查当图片不存在时显示默认图片和键盘大小写键状态

    当图片不存在时显示默认图片 <script type="text/javascript"> var imgs = document.images; for(var i ...

  2. .net core 添加省市区三级联动以及编辑时显示选中的城市。

    1 @model Core.Net.Model.CoreNetBuild.CoreNetPrejectAllocation; 2 @using Core.Net.Common.Core.Net.Cor ...

  3. 关于input在li列表中居中显示

    input属于置换元素(replaced element),置换元素主要是指img,input,textarea,select,object等这类默认就有CSS格式化外表范围的元素,这些元素的垂直居中 ...

  4. extjs combobox 设置下拉时显示滚动条 设置显示条数

    extjs在点击下拉时如果没有限制它的高度,那么它的默认最大高度是300,显示的时候就会显示300的高度,知道选项内容超过这个高度时才会自动显示滚动条,往往在有些时候我们希望让combobox显示一个 ...

  5. 原生JS实现全屏切换以及导航栏滑动隐藏及显示——重构前

    思路分析: 向后滚动鼠标滚轮,页面向下全屏切换:向前滚动滚轮,页面向上全屏切换.切换过程为动画效果. 第一屏时,导航栏固定在页面顶部,切换到第二屏时,导航条向左滑动隐藏.切换回第一屏时,导航栏向右滑动 ...

  6. JS实现类似QQ好友头像hover时显示资料卡的效果

    一.应用场景 鼠标hover弹出div,并且鼠标离开后不能马上隐藏,因为这个div上还有功能入口.比如: 鼠标经过好友列表中的好友头像时显示资料卡的效果 hover时显示二维码 二.实现 用如下这样一 ...

  7. React实现顶部固定滑动式导航栏（导航条下拉一定像素时显示原导航栏样式）

    摘要 基于react的框架开发一个顶部固定滑动式的酷炫导航栏,当导航栏置顶时,导航栏沉浸在背景图片里:当鼠标滑动滚轮时,导航栏固定滑动并展示下拉样式. JS部分 相关技术栈:react.antd.re ...

  8. Vue 循环为选中的li列表添加效果

    <!DOCTYPE html><html><head> <meta charset="utf-8"> <title>Vu ...

  9. js勾选时显示相应内容

    使用环境,一.比如用户勾选时显示一些安全方面提示“你真的要自动登录吗?这将使你下次不需要密码即可进入你的个人中心.”二.显示其他预设选项,以方便用户选择输入,比如密保问题设置,当用户不想使用自定义设置 ...

  10. js实现点击按钮时显示弹框，点击按钮及弹框以外的区域时隐藏弹框

    转自https://blog.csdn.net/yimawujiang/article/details/86496936 问题:js实现点击按钮时显示弹框,点击按钮及弹框以外的区域时隐藏弹框? 方案一 ...

随机推荐

  1. IIncrementalGenerator 获取项目默认命名空间

    本文将告诉大家如何在分析器里面获取到项目的默认命名空间 在 Roslyn 分析器里面读取项目的默认命名空间,可以通过读取项目的属性配置实现.通过 IIncrementalGenerator 增量 So ...

  2. vue应用el-tabel封装

    <template> <div class="table"> <el-table :data="tableList" style= ...

  3. SpringBoot序列化、反序列化空字符串为null的三种方式

    一.需求:接收前端传入的""空字符串参数,有时候我们需要把它转为null SpringBoot项目 方式:①Jackson(推荐).②切面+反射.③注解+切面+反射 后两种方式,未 ...

  4. 分享几个.NET开源的AI和LLM相关项目框架

    前言 现如今人工智能(AI)技术的发展可谓是如火如荼,它们在各个领域都展现出了巨大的潜力和影响力.今天大姚给大家分享4个.NET开源的AI和LLM相关的项目框架,希望能为大家提供一些参考.如果你有更好 ...

  5. 04.1 go-admin自动化上线到生产环境 nginx配置上线vue和go

    目录 简介 基于Gin + Vue + Element UI的前后端分离权限管理系统 一. 上线思路 1.1 首先确保项目前后端在本地可以都可以正常跑起来,如果不会可以去看一下作者的视频教程 1.2 ...

  6. installshield 安装jdk并配置环境变量

    今天来通过installshield安装jdk以及配置环境变量,本质上是调用第三方安装程序. 首先将jdk的安装文件添加到我们的安装程序中 然后编写我们的脚本 选择BEHAVIOR AND LOGIC ...

  7. 密码学—DES加密算法

    文章目录 DES流程 DES细节 生成密钥 DES加密 E盒扩展 S盒替换 P盒置换 DES流程 因为DES是对比特流进行加密的,所以信息在加密之前先转为二进制比特流 1:生成16把密钥 只取给出的密 ...

  8. 2023年的Clion内建立多个子项目(保姆级教程)

    目录 下载插件C/C++ Single File Execution 项目操作 其他操作 下载插件C/C++ Single File Execution 项目操作 1.新建项目-->如图所示操作 ...

  9. 倒计时7天！AIRIOT新品发布会，6月6日北京见。

    随着物联网.大数据.AI技术的成熟和演进,智能物联网技术正在加速.深入渗透至各行业应用. AIRIOT物联网平台作为赋能数字经济发展和产业转型的数字基座,由航天科技控股集团股份有限公司(股票代码:00 ...

  10. 智能勘探 | AIRIOT智慧油田管理解决方案

      石油勘探和开采地处偏远地区,涉及面广且生产规模大.特殊的作业环境下,使得工作人员作业条件艰苦,仅靠人工值守难度很大,不可避免的遇到一系列硬核挑战: 1.设备维护难度较高: 2.采油厂分布地域广.分 ...