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

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. RPA系列之(二)-UIPath学习目录

    如何一步步渐入佳境,跟着目录一点一点来 UiPath简介 UiPath下载安装与激活 UiPath第一个案例Hello World UiPath变量的介绍和使用-1 UiPath变量的介绍和使用-2 ...

  2. 【IntelliJ IDEA学习之四】IntelliJ IDEA常用插件

    版本:IntelliJIDEA2018.1.4 一.代码规范Alibaba Java Coding Guidelines:阿里巴巴代码规范检查插件FindBugs-IDEA:潜在 Bug 检查Sona ...

  3. 【C++】内联函数(inline)和宏定义(# define)的优劣及其区别

    一.宏定义:# define 1.为什么要使用宏? 因为调用宏比调用函数更有效率,函数的调用必须要将程序的执行顺序转移到函数所存放的内存地址中,将函数程序内容执行完后,再返回到执行该函数前的地方,这种 ...

  4. JVM调优前戏之JDK命令行工具---jstack

    在JDK的命令行中,一般开发人员最耳熟能详的肯定就是java,javac,javap等常用命令,不过在jdk/bin下还有许多其他的命令行工具,它们被用来监测JVM运行时的状态,下面我们来详细解读一下 ...

  5. GO中标识符,标识符,变量,常量,iota

    参考:https://www.cnblogs.com/nickchen121/p/11517455.html 一.标识符与关键字 1.标识符 在编程语言中标识符就是程序员定义的具有特殊意义的词,比如变 ...

  6. C++删除排序数组中的重复项

    class Solution { public: int removeDuplicates(vector<int>& nums) { if (nums.empty()) { ; } ...

  7. 示例:在Nuget发布自己的包的步骤

    原文:示例:在Nuget发布自己的包的步骤 一.目的:很多时候都在用第三方的Nuget包,现成的轮子可以减少很多工作量,同时我们也可以造轮子供自己和其他人使用,本示例主要演示如何发布dll到Nuget ...

  8. Implementing Azure AD Single Sign-Out in ASP.NET Core(转载)

    Let's start with a scenario. Bob the user has logged in to your ASP.NET Core application through Azu ...

  9. mysql 中 and和or 一起使用和之间的优先级

    SELECT address,job_title,education,SUM(recruiting) FROM commerce_jobs WHERE education = '大专' and ( j ...

  10. JS获取当前时间戳及时间戳的转换

    获取现在的Unix时间戳(Unix timestamp) Math.round(new Date().getTime()/1000)  //getTime()返回数值的单位是毫秒 Unix时间戳(Un ...