Django bootstrap按钮点击后激活active
现在有个需求,就是在导航栏上有若干个按钮,我想实现的功能是当点击某个按钮后修改文字颜色,这样网站会更人性化。现总结方法如下:
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})
Django bootstrap按钮点击后激活active的更多相关文章
- 吴裕雄 Bootstrap 前端框架开发——Bootstrap 按钮:激活状态
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title> ...
- BootStrap中按钮点击后被禁用按钮的最佳实现方法
//禁用button $('button').addClass('disabled'); // Disables visually $('button').prop('disabled', true) ...
- Bootstrap 按钮
本章将通过实例讲解如何使用 Bootstrap 按钮.任何带有 class .btn 的元素都会继承圆角灰色按钮的默认外观.但是 Bootstrap 提供了一些选项来定义按钮的样式,具体如下表所示: ...
- Bootstrap按钮插件
前面的话 按钮插件提供了一组可以控制按钮多种状态的功能,比如按钮的禁用状态.正在加载状态.正常状态等.本文将详细介绍Bootstrap按钮插件 加载状态 通过按钮可以设计状态提示,当单击按钮时,会显示 ...
- Bootstrap -- 按钮样式与使用
Bootstrap -- 按钮样式与使用 1. 可用于<a>, <button>, 或 <input> 元素的按钮样式 按钮样式使用: <!DOCTYPE h ...
- 第二百四十七节,Bootstrap按钮和折叠插件
Bootstrap按钮和折叠插件 学习要点: 1.按钮 2.折叠 本节课我们主要学习一下 Bootstrap 中的按钮和折叠插件. 一.按钮 可以通过按钮插件创建不同状态的按钮,也就是点击后为选中状态 ...
- 吴裕雄 Bootstrap 前端框架开发——Bootstrap 按钮:按钮被点击
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title> ...
- bootstrap 按钮 文本 浮动 隐藏
bootstrap 按钮 文本 浮动 隐藏 <!DOCTYPE html> <html lang="en"> <head> <meta c ...
- Bootstrap 按钮,图片,辅助类
Bootstrap 按钮 任何带有 class .btn 的元素都会继承圆角灰色按钮的默认外观.但是 Bootstrap 提供了一些选项来定义按钮的样式,具体如下表所示: 以下样式可用于<a&g ...
随机推荐
- Java 并发系列之十:java 并发框架(2个)
1. Fork/Join框架 2. Executor框架 3. ThreadPoolExecutor 4. ScheduledThreadPoolExecutor 5. FutureTask 6. t ...
- 分布式事务解决方案(一) 2阶段提交 & 3阶段提交 & TCC
参考文档:http://blog.jobbole.com/95632/https://yq.aliyun.com/articles/582282?spm=a2c4e.11163080.searchbl ...
- [WeChat-Bot-Go] 记录帖
本来是想写一个微信机器人出来,用go语言. Github 目标是想做一个自动发送消息和抢红包的bot. 一开始跟着 这篇 文章写.写着写着发现文章久远,而且用的是第一版网页微信api,所以就自己去 ...
- Java 在 Word 文档中使用新文本替换指定文本
创作一份文案,经常会高频率地使用某些词汇,如地名.人名.人物职位等,若表述有误,就需要整体撤换.文本将介绍如何使用Spire.Doc for Java,在Java程序中对Word文档中的指定文本进行替 ...
- MarkDown的常规用法
MarkDown的常规用法 标题 # 一级标题 ## 二级标题 ... ###### 六级标题 列表 第二级 - 和 空格 + 和 空额 * 和 空格 第三级 代码块 多行代码块 3个` 回车 单行代 ...
- mysql 事务的实现原理
开篇 相信大家都用过事务以及了解他的特点,如原子性(Atomicity),一致性(Consistency),隔离型(Isolation)以及持久性(Durability)等.今天想跟大家一起研究下事务 ...
- 在Asp.Net Core MVC 3.0 视图运行时编译
在正常情况下,视图在生成的时候就会变为 xxx.Views.dll,在开发的时候,这样很不方便,因为很多的时候,我们只是修改一个样式,调整一些JavaScript代码,这个时候要把项目调试暂停下来,生 ...
- 用lambda表达式写分组查询的示例
需要完成的查询逻辑:查询A表中根据CertificateDelayApplyRecordId 分组,每条记录算8个课时,查询出每个CertificateDelayApplyRecordId已经学习了的 ...
- APS.NET MVC + EF (02)---深入理解ADO.NET Entity Framework
2.7 深入理解Entity Framework 性能问题几乎是一切ORM框架的通病,对于EF来说,引起性能低的原因主要在以下几个方面. 复杂的对象管理机制为了在.NET中更好地管理模型对象,EF提供 ...
- opencv简单卷积运用
import cv2 as cv import numpy as np img=cv.imread('learn.jpg',cv.IMREAD_GRAYSCALE) cv.imshow('first ...