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

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. react-native字体react-native-vector-icons在ios下的使用

    react-native字体react-native-vector-icons在ios下的使用 官网和网上有各种针对ios/android的安装和使用方法:能够使用了,基本就等于安装成功了. reac ...

  2. cad 一个小技巧--复制视口带冻结信息

    cad使用 ctrl+c 和 ctrl+v 进行跨文件复制视口的时候,会出现复制视口冻结信息丢失,因为你只选择了视口进行复制, 如果要实现带上冻结信息,那么要把含有相关图层的图元一起 ctrl+c/v ...

  3. 实现简单的AOP前置后置增强

    AOP操作是我们日常开发经常使用到的操作,例如都会用到的spring事务管理.今天我们通过一个demo实现对一个类的某一个方法进行前置和后置的增强. //被增强类 public class PetSt ...

  4. Python【每日一问】31

    问: [基础题]:有 n 个人围成一圈,顺序排号.从第一个人开始报数(从 1 到 3 报数) ,凡报到 3 的人退出圈子,问最后留下的是原来第几号的那位. (n由键盘输入,比如n=100) [提高题] ...

  5. [原创]Python免杀ShellCode加载器(Cobaltstrike/Metasploit)

    0x001 原理 采用分离法,即将ShellCode和加载器分离.方法较LOW但免杀. 本文主要将ShellCode转成HEX,再通过加载器执行ShellCode. PS: 何为SC加载器,即专门用于 ...

  6. TF-IDF算法简析

    TF-IDF算法可用来提取文档的关键词,关键词在文本聚类.文本分类.文献检索.自动文摘等方面有着重要应用. 算法原理 TF:Term Frequency,词频 IDF:Inverse Document ...

  7. ubuntu docker 下mongodb集群和分片

    首先我们计划启动了三个mongo服务:master,salve,arbiter 1.准备工作 新建文件夹如图(每个文件夹下面有db和configdb文件夹): 生成认证文件并修改权限 openssl ...

  8. TestNG系列(三)TestNG之XML文件配置

    前言 上一篇博客说了TestNG的注解,这篇博客来介绍Test.xml文件. Test.xml文件可以更方便的管理和执行测试用例 一.Test.xml-suite: suite为Test.xml的根节 ...

  9. 【转】socket通信-C#实现tcp收发图片音视频等字节流数据

    在日常碰到的项目中,经常碰到需要收发二进制数据的场景.比如要发送一张图片,要发送一首音频,要发送一个压缩包,要发送一个视频等等.这些数据并非字符串,而是二进制字节流数据.那么如何如何使用SharpSo ...

  10. MVC拦截

    1using System; 2using System.Collections.Generic; 3using System.Linq; 4using System.Web; 5using Syst ...