现在有个需求,就是在导航栏上有若干个按钮,我想实现的功能是当点击某个按钮后修改文字颜色,这样网站会更人性化。现总结方法如下:

index.html:

<ul class="navbar-nav mr-auto">
<li class="nav-item">
<a class="nav-link {% if isactive == 'home' %}active{% endif %}" href="{% url 'home' %}">Home</a>
</li>
<li class="nav-item">
<a class="nav-link {% if isactive == 'about' %}active{% endif %}" href="{% url 'about' %}">About</a>
</li>
</ul>

app.views.py

def home(reqeust):
isactive = "home"
return render(request, "home.html", {"isactive":isactive}) def about(reqeust):
isactive = "about"
return render(request, "about.html", {"isactive":isactive})

MARSGGBO♥原创







2019-8-12

Django bootstrap按钮点击后激活active的更多相关文章

  1. 吴裕雄 Bootstrap 前端框架开发——Bootstrap 按钮:激活状态

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

  2. BootStrap中按钮点击后被禁用按钮的最佳实现方法

    //禁用button $('button').addClass('disabled'); // Disables visually $('button').prop('disabled', true) ...

  3. Bootstrap 按钮

    本章将通过实例讲解如何使用 Bootstrap 按钮.任何带有 class .btn 的元素都会继承圆角灰色按钮的默认外观.但是 Bootstrap 提供了一些选项来定义按钮的样式,具体如下表所示: ...

  4. Bootstrap按钮插件

    前面的话 按钮插件提供了一组可以控制按钮多种状态的功能,比如按钮的禁用状态.正在加载状态.正常状态等.本文将详细介绍Bootstrap按钮插件 加载状态 通过按钮可以设计状态提示,当单击按钮时,会显示 ...

  5. Bootstrap -- 按钮样式与使用

    Bootstrap -- 按钮样式与使用 1. 可用于<a>, <button>, 或 <input> 元素的按钮样式 按钮样式使用: <!DOCTYPE h ...

  6. 第二百四十七节,Bootstrap按钮和折叠插件

    Bootstrap按钮和折叠插件 学习要点: 1.按钮 2.折叠 本节课我们主要学习一下 Bootstrap 中的按钮和折叠插件. 一.按钮 可以通过按钮插件创建不同状态的按钮,也就是点击后为选中状态 ...

  7. 吴裕雄 Bootstrap 前端框架开发——Bootstrap 按钮:按钮被点击

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

  8. bootstrap 按钮 文本 浮动 隐藏

    bootstrap 按钮 文本 浮动 隐藏 <!DOCTYPE html> <html lang="en"> <head> <meta c ...

  9. Bootstrap 按钮,图片,辅助类

    Bootstrap 按钮 任何带有 class .btn 的元素都会继承圆角灰色按钮的默认外观.但是 Bootstrap 提供了一些选项来定义按钮的样式,具体如下表所示: 以下样式可用于<a&g ...

随机推荐

  1. [HeadFrist-HTMLCSS学习笔记]第七、八章

    [HeadFrist-HTMLCSS学习笔记]第七章CSS入门:加一点样式 重点噻 段落添加背景颜色 p{ background-color: red; } 文本颜色 p{ color: ,maroo ...

  2. [技术博客]微信小程序审核的注意事项及企业版小程序的申请流程

    关于小程序审核及企业版小程序申请的一些问题 微信小程序是一个非常方便的平台.由于微信小程序可以通过微信直接进入,不需要下载,且可使用微信账号直接登录,因此具有巨大的流量优势.但是,也正是因为微信流量巨 ...

  3. centos 6.9 安装docker

    1.查看系统具体版本 yum install lsb -y lsb_release -a 2.安装yum源 yum -y install http://dl.fedoraproject.org/pub ...

  4. 模型区分度衡量指标-KS值

    1.KS值--学习器将正例和反例分开的能力,确定最好的“截断点” KS曲线和ROC曲线都用到了TPR,FPR.KS曲线是把TPR和FPR都作为纵坐标,而样本数作为横坐标.但是AUC只评价了模型的整体训 ...

  5. python入门之数据类型及内置方法

    目录 一.题记 二.整形int 2.1 用途 2.2 定义方式 2.3 常用方法 2.3.1 进制之间的转换 2.3.2 数据类型转换 3 类型总结 三.浮点型float 3.1 用途 3.2 定义方 ...

  6. 【剑指offer】构建乘积数组

    题目描述 给定一个数组A[0,1,...,n-1],请构建一个数组B[0,1,...,n-1],其中B中的元素B[i]=A[0]*A[1]*...*A[i-1]*A[i+1]*...*A[n-1].不 ...

  7. [转帖]AWR报告参数:DB TIME和DB CPU

    AWR报告参数:DB TIME和DB CPU http://blog.itpub.net/12679300/viewspace-1182396/ 一.前言:AWR报告是了解ORACLE运行的一个重要报 ...

  8. Effective.Java第45-55条(规范相关)

    45.  明智谨慎地使用Stream 46.  优先考虑流中无副作用的函数 47.  优先使用Collection而不是Stream作为方法的返回类型 48.  谨慎使用流并行 49.  检查参数有效 ...

  9. MODBUS 数据格式相关记录

    串口通讯格式: 串口通讯可以分为同步通讯(Synchronous)和异步通讯(Asynchronous).同步通讯时有一根时钟信号,数据格式中没有起始位和停止位:异步通讯中没有时钟信号,数据格式中包含 ...

  10. .netcore docker noe4j

    1.借用docker搭建noe4j环境 docker pull neo4j docker run -d --restart=always -p7474: -p7687: -v /root/docker ...