首页 > 其他分享 >Js 实现导航li列表,选中时,显示选中样式

Js 实现导航li列表,选中时,显示选中样式

时间:2023-02-06 14:13:49浏览次数:30  
标签:样式 li 实现 选中 Js id

结合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、实现效果:

标签:样式,li,实现,选中,Js,id
From: https://www.cnblogs.com/cuitang/p/17095217.html

相关文章

  • SolidWORKS 开启小金球
    转抄:RealHackSolidWORKS2015安装过程:1、首先安装上SolidWORKS2015,并使用注册机激活。 2、启动SolidWORKS2015一次,然后关闭掉。 3、打开注册表,可直接在命令窗口......
  • Linux关于用户和组操作的命令
    准备工具本篇已UbuntuLinux系统为例来讲解Linux关于用户和组操作的命令(只有root权限才可以执行下面讲解的命令!)。不用担心其他发行版系统不能使用这些命令,它们的基本操作......
  • jsp Request获取url信息的各种方法比较
    ​​​​​1.从Request对象中可以获取各种路径信息,以下例子:2.假设请求的页面是index.jsp,项目是WebDemo,则在index.jsp中获取有关request对象的各种路径信息如下......
  • 强化学习 2 —— 用动态规划解决 MDP 问题 (Policy Iteration and Value Iteration)
    强化学习2——用动态规划求解MDP在上一篇文章​​强化学习1——一文读懂马尔科夫决策过程MDP​​介绍了马尔科夫过程,本篇接着来介绍如何使用动态规划方法来求解。......
  • vue3 - 报错 ESLint: Component name "index" should always be multi-word.(vue/mult
    1.原因最新的规则校验要求不建议使用index或者单各单词,防止与母版index冲突,虽然我并未遇到这样的问题,报错就是这么提示    2.解决我这里采用关闭这个规则校验......
  • LINUX系统下需要Enter password时密码不显示
    如题,可能会有人像我一样用惯了windows在输入密码时输入的字符用“********”来代替。所以第一次用Linux在enterpassword时会比较懵,输了之后屏幕上啥也不显示。其实linux......
  • 【android】Android中app的applicationId和包名的区别
    Androidapp的applicationId和包名的区别  每个Android应用都有一个唯一的应用ID。在Android设备和市场上,这个ID是你应用的唯一标识.若想在市场上更新应用,新应用的ID......
  • JS每日自动换图_周图&月图——纯JS
    纯JS做每日换图,是非常简单的换图的常规频率为周轮和月轮思路是相同的当然也可以使用定时器来做自定义时间段的轮播式每日换图可以认为是轮播的衍生或者它衍生了轮播,都可以为......
  • 《Vue.js 设计与实现》读书笔记 - 第10章、双端 Diff 算法
    第10章、双端Diff算法10.1双端比较的原理上一章的移动算法并不是最优的,比如我们把ABC移动为CAB,如下ACB-->ACB按照上一章的算法,我们遍历新的数组,......
  • Java反编译工具JD-GUI以及Eclipse的反编译插件
    什么是反编译高级语言源程序经过编译变成可执行文件,反编译就是逆过程。但是通常不能把可执行文件变成高级语言源代码,只能转换成汇编程序。反编译是一个复杂的过程,所以越是......