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

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. php获取客户端公网ip代码

    <?php /*如果是本地服务器获取客户端的ip地址是 127.0.0.1 如果是域名服务器获取客户端的是公网ip地址*/ function get_client_ip() { $ipaddre ...

  2. [原创]Emmagee V2.4工具使用介绍

    [原创]Emmagee V2.4工具使用介绍 1 Emmagee 介绍 Emmagee 是网易杭州研究院 QA团队开发的一款简单易上手的Android性能监控App,主要用于监控单个App的CPU.内 ...

  3. 调用 redis 原子命令,保证多线程安全 的incr命令问题

    redis本身就是事件驱动模型,你incr递增好了,然后get获取判断一下是否超过次数 参考:如何用java实现redis incr的高并发计数器

  4. mysql 数据库中的每张表加同一个字段(避免重复加)

    DROP PROCEDURE IF EXISTS testEndHandle; DELIMITER $$ CREATE PROCEDURE testEndHandle() BEGIN DECLARE ...

  5. STL源码剖析 阅读笔记

    结构图:

  6. 微信公众平台开发(150)——从新浪云SAE上传图片到图文消息

    从新浪云SAE上传图片到图文消息,只能用于图文消息中, 没有个数限制 if (!empty($_FILES['qrcode']['name'])){ $filename = time()." ...

  7. Debug 路漫漫-09:构建CNN时维度不一致问题

    Build CNN Network 之后,运行,但是报错: ValueError: Input 0 is incompatible with layer predict_vector_conv1: e ...

  8. How to let your website login with domain account when using IIS to deploy it?

    如何让你的网站以域账号登录 Select your website in IIS Manager, open Authentication, enable Windows Authentication ...

  9. python安装pyautogui

    一.问题在安装使用[pip install pyautogui]的时候会出现如下的错误: ERROR: Complete output from command python setup.py egg ...

  10. win10下apache superset的使用

    官方文档:http://superset.apache.org/ 一.环境准备 安装python3即3.4以上版本 二.python创建一个虚拟环境用来作为superset的容器 -pip3 inst ...