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 ... 
随机推荐
- prometheus安装(docker)
			参考:https://github.com/songjiayang/prometheus_practice https://github.com/kjanshair/docker-prometheus ... 
- 10 张图带你深入理解 Docker 容器和镜像
			这篇文章希望能够帮助读者深入理解 Docker 的命令,还有容器(container)和镜像(image)之间的区别,并深入探讨容器和运行中的容器之间的区别. 当我对 Docker 技术还是一知半解的 ... 
- storm单节点问题(转载)
			一.storm nimbus 单节点问题概述 1.storm集群在生产环境部署之后,通常会是如下的结构: 从图中可以看出zookeeper和supervisor都是多节点,任意1个zookeeper节 ... 
- Java爬虫利器HTML解析工具-Jsoup
			Jsoup简介 Java爬虫解析HTML文档的工具有:htmlparser, Jsoup.本文将会详细介绍Jsoup的使用方法,10分钟搞定Java爬虫HTML解析. Jsoup可以直接解析某个URL ... 
- Docker 下的Zookeeper以及.ne core 的分布式锁
			单节点 1.拉取镜像:docker pull zookeeper 2.运行容器 a.我的容器同一放在/root/docker下面,然后创建相应的目录和文件, mkdir zookeeper cd zo ... 
- Django 路由正则URL
			Django 路由正则URL URL1 # 路由 url(r'^detail/', views.detail) {#点击跳转到指定用户下显示信息#} <li><a target=&q ... 
- 补习系列(17)-springboot mongodb 内嵌数据库【华为云技术分享】
			目录 简介 一.使用 flapdoodle.embed.mongo A. 引入依赖 B. 准备测试类 C. 完善配置 D. 启动测试 细节 二.使用Fongo A. 引入框架 B. 准备测试类 C.业 ... 
- HTTP协议随笔
			代理 代理就是处在客户端和服务端之间的服务器.客户端例如浏览器发送GET请求时,代理服务器接收该请求,并转发该请求至服务所在的服务器.服务器回复的数据和资源在第一时间经过代理服务器,才能回传到浏览器, ... 
- MOOC python笔记(二)python中的数据类型和基本语句
			python数据类型 数字类型 整数(int) 与数学中整数概念一致(数字大小没有限制,这和其他语言不同),整数可正可负,默认情况下,整数采用十进制.其他进制需要增加相应的引导符号. 如果是二进制在前 ... 
- syntax error near unexpected token 脚本报错误解决
			hadoop老师给了一个shell文件,在windows里面瞅了一眼然后在ubuntu环境下运行就报错了.看了一些博客,用vim -b filename查看的时候发现每一行的末尾都多了一个^M.... ... 
