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 ...
随机推荐
- 【ASP.NET Core分布式项目实战】(六)Gitlab安装
Gitlab GitLab是由GitLabInc.开发,使用MIT许可证的基于网络的Git仓库管理工具,且具有wiki和issue跟踪功能.使用Git作为代码管理工具,并在此基础上搭建起来的web服务 ...
- [HeadFrist-HTMLCSS学习笔记]第二章深入了解超文本:认识HTML中的“HT”
[HeadFrist-HTMLCSS学习笔记]第二章深入了解超文本:认识HTML中的"HT" 敲黑板!!! 创建HTML超链接 <a>链接文本(此处会有下划线,可以单击 ...
- 《Linux就该这么学》培训笔记_ch19_使用PXE+Kickstart无人值守安装服务
<Linux就该这么学>培训笔记_ch19_使用PXE+Kickstart无人值守安装服务 文章最后会post上书本的笔记照片. 文章主要内容: 无人值守系统 部署相关服务程序 配置DHC ...
- Postman接口测试【3】_自动添加随笔
一.抓取博客园编写博客地址 1.通过Charles抓取,获取到编写博客接口地址和接口的参数 二.Postman请求接口 打开Postman,输入上面抓到的接口地址,接口类型为POST,请求参数为x-w ...
- Tp中使用Xunsearch
可以将安装目录下的核心代码拷贝到Vendor中. 命名为xunsearch. 然后引入使用. vendor('xunsearch.lib.XS'); $xs = new \XS('demo'); // ...
- git 命令行回退到某个指定的版本
1.在开发过程中遇到合并别人的代码或者合并主分支的代码导致自己的分支代码冲突或有别的问题,这时我们需要回退某个git提交历史的代码 用一下命令 git reset --hard 139dcfaa558 ...
- Effective.Java第78-90条(同步相关)
78. 同步访问共享的可变数据 为了在线程之间进行可靠的通信,也为了互斥访问,同步是必要的. 不共享可变的数据.要么共享不可变的数据,要么压根不共享.换句话说,将可变数据限制在单线程中. 当多个线程 ...
- java数字前面补充0公共方法
- 如何通过 IntelliJ IDEA 来提升 Java8 Stream 的编码效率
本文翻译整理自:https://winterbe.com/posts/2015/03/05/fixing-java-8-stream-gotchas-with-intellij-idea 作者:@Wi ...
- C#——操作Word并导出PDF
一.操作Word 首先引用这个DLL,Microsoft.Office.Interop.Word,官方提供的. 可以操作word文字,表格,图片等. 文字通过替换关键字的方式实现 document.P ...