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 ...
随机推荐
- 关联分析-MIC
MIC:the Maximal Information Coefficient,是用网格分法判断数据的集中程度的一个标准. MIC所依据的理念是,如果2个变量之间存在着一种关系,那么就应该有一种方法在 ...
- 【Gamma】“北航社团帮”展示博客
目录 团队介绍 项目愿景 整个项目的预期典型用户 功能展示 原预期用户数量 项目使用情况数据分析 用户量变化 学生认证人数 社长认证人数 入社申请数 活动发布 新闻发布 网页端使用情况 小程序打开次数 ...
- 将物理机转换成vmware虚机
随着虚拟化的快速发展,公司主要是以公有云+私有云结合的混合云部署,据我不成熟的了解,目前很少有公司会将一台单独的物理机作为服务器,在公司内部大家逐渐接受了私有云的部署方案,这样做不但可以节省硬件资源, ...
- 收藏:png8和png24的根本区别
1.png8和png24的根本区别,不是颜色位的区别,而是存储方式不同. 2.png8有1位的布尔透明通道(要么完全透明,要么完全不透明),png24则有8位(256阶)的布尔透明通道(所谓半透明). ...
- LOJ3124 CTS2019 氪金手游 概率、容斥、树形DP
传送门 D2T3签到题可真是IQ Decrease,概率独立没想到然后就20pts滚粗了 注意题目是先对于所有点rand一个权值\(w\)然后再抽卡. 先考虑给出的关系是一棵外向树的情况.那么我们要求 ...
- Maven 教程(18)— 利用 Profile 构建不同环境的部署包
原文地址:https://blog.csdn.net/liupeifeng3514/article/details/79776257 接上回继续,项目开发好以后,通常要在多个环境部署,象我们公司多达5 ...
- c++11 enum class用法
使用过的一个enum class的用法:enum class EModel : int { Model1, Model2, Model3, Other = 4, }; EMo ...
- element-ui复杂表单校验
复杂表单如下: <el-form size="mini" :rules="rules" :model="form" label-wid ...
- c++11多线程记录0
两种并发编程模型 多进程 进程间通信常用的几种方式: 文件 管道 消息队列 多线程 一个进程中存在的多个线程,通常通过共享内存来通信,(说的非常非常粗俗,就是通过类似"全局变量"的 ...
- gitblit搭建
gitblit 1.8.0 + java7 下载安装java7 https://download.oracle.com/otn/java/jdk/7u80-b15/jdk-7u80-windows- ...