结合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. 重回铁王座！时隔5年！Quill 2.0 终于发布啦🎉

    你好,我是 Kagol. 2024年4月17日,Quill 2.0 正式发布 最后一个 1.0 版本 1.3.7 发布于 2019年9月9日,时隔4年零7个月. 富文本编辑器拥有非常丰富的使用场景,我 ...

  2. 利用Navicat的历史日志查询表的索引信息（还可以查询很多系统级别的信息）

    1.使用前提 所有的能用Navicat连接的数据库都可以使用这个方法 DDL/DML语句都有 2.Navicat中的历史日志 3.比如查询mysql的表的索引 先打开"历史记录" ...

  3. Unity热更学习笔记--AB包的依赖 0.98

    AB包的依赖 接上一小结. 在这里我们新建一个红色材质球,赋值给Cube预制体.此时不对材质球进行AB包分类,再次进行打包.运行脚本,发现红色cube成功的从AB包中加载出来.尽管我们没有将cube所 ...

  4. 【爬虫GUI】YouTube评论采集软件，突破反爬，可无限爬取！

    目录 一.背景介绍 1.1 软件说明 1.2 效果演示 二.科普知识 2.1 关于视频id 2.2 关于评论时间 三.爬虫代码 3.1 界面模块 3.2 爬虫模块 3.3 日志模块 四.获取源码及软件 ...

  5. 04.2 go-admin前后端打包为一个服务上线

    目录 一.思路: 二.打包go-admin-ui为静态文件 a.修改配置文件 b.打包 c.复制dist到go-admin的static目录里 三.配置go-admin a.配置路由 b.访问页面 视 ...

  6. cuBlas API Launch Latency 耗时异常分析记录

    一.背景 最近在做 AI 编译器生成 Kernel 支持 Bert 模型训练调优工作,在分析 bert 的timeline中发现,在每个 step 的前两个 cinn_instruction_run ...

  7. VueJS和Javascript实现文字上下滚动效果

    一提到文字上下滚动,我们就会想到用不同的程序去实现,而且页面中有文字滚动会增加这个网页的互动和可信度. 1.Js最简单的方法是控制盒子的高度,使不断的重复添加 <html> <bod ...

  8. 一键自动化博客发布工具,用过的人都说好(51cto篇)

    51cto是一个优秀的博客平台,今天给大家讲解一下blog-auto-publishing-tools如何自动发布博客到51cto上. 当然在实现过程中有可能会遇到各种困难,不过不用担心,我们一个个来 ...

  9. Chart.js (v2.9.4)概要介绍

    chart.js是一个非常优秀的开源图表插件,扩展非常灵活,同时也提供了大量的钩子函数,给与用户添加自定义插件,实现个性化的需求. 具体的优势特点,这里不详述,网上大把资料,现开始正式深入了解这个插件 ...

  10. Swoole 源码分析之 WebSocket 模块

    首发原文链接:Swoole 源码分析之 WebSocket 模块 大家好,我是码农先森. Swoole 源码分析之 WebSocket 模块 引言 WebSocket 是一种在单个 TCP 连接上进行 ...