结合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. dotnet C# 如果在构造函数抛出异常 是否可以拿到对象赋值的变量

    如果使用某个变量去获取某个类型的对象创建,但是在这个类型的构造函数调用时抛出异常,请问此变量是否可以拿到对应的对象 如下面代码 private void F1() { Foo foo = null; ...

  2. ESP32 分区表

    当你编译程序,发现 app partition is too small for binary 错误的时候,就涉及到 ESP32 分区表的内容了. 一.基本概念 在了解分区之前,先了解一下以下概率,便 ...

  3. Photoshop批量替换图层的方法

    平时做图片,应该有遇到这样的场景,比如P奖状.P邀请函,内容是一样的,但是图片上的名字是不一样的,要是要P100张的话,一个个手动复制改名字肯定会吐血(╯°□°)╯︵ ┻━┻ Photoshop里有个 ...

  4. vue使用vant的van-tabs+tag在选项卡展示该内容有几条的提示

    1.直接写用v-if判断下标展示,会滚动.pass! 2.定位,各种定位,相对各种父元素各种定位,还是会滚,因为tab内容一定滚动,pass 3.手写选项卡+v-if判断,这肯定可行,但本着能用ui组 ...

  5. 1.13~1.14&&放假寄

    1.13 3点就放了,手机在机房就能拿到,我为了给手机充会电又多留了一会(事实证明这挺对的) 因为我们是 化微机的班,老师收手机都放在一个箱子里,要有人负责把剩下的手机搬到教室,我走得晚还被当成免费劳 ...

  6. 关于ITIL的习惯性误解

    关于ITIL的习惯性误解 1. ITIL是标准?不是!ITIL本质是一套适合西方社会信息化阶段的 模板原版教材 最佳实践(Best Practice),不是标准. 大量的培训师和咨询顾问将其包装成&q ...

  7. python教程6.3-time模块datetime模块

     由于time是基于Unix Timestamp,所以其所能表述的日期范围被限定在 1970 – 2038 之间.因此2038年后就不能用time了,建议使用datetime. time模块 有下面几 ...

  8. UE4 C++调用手柄震动

    近期封装输入相关逻辑,简单归纳下. 蓝图实现 内容界面右键Miscellaneous->Force Feedback Effect,创建力反馈对象并填写相关参数: 然后在蓝图中用Spawn Fo ...

  9. JDK源码阅读-------自学笔记(二十六)(java.util.Map 自定义讲解)

    一.简介 Map就是用来存储"键(key)-值(value)"对的. 通过键寻找value,所以键不能重复. 数组的本质也是一种键值对,区别就是索引一般是数字,而Map的Key可以 ...

  10. 初识上位机（下）：C#读写PLC数据块数据

    大家好,我是Edison. 作为一个工业自动化领域的程序员,不懂点PLC和上位机,貌似有点说不过去.这里我用两篇小文带你快速进入上位机开发领域.后续,我会考虑再出一个系列文章一起玩工控上位机. 上一篇 ...