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 ...
随机推荐
- 腾讯云VPS注意事项
这几天腾讯云VPS搞活动 买了2台服务器, 1台是1核2G1M带宽,一年99 1台是2核4G6M带宽,三年1499 前几年一直在用阿里云,感觉价格太贵,价格上腾讯云,搞活动真的优惠比较大, 最近也准备 ...
- Beta/Gamma事后分析
目录 设想和目标 计划 资源 变更管理 设计/实现 测试/发布 团队的角色,管理,合作 总结 对照敏捷开发的原则, 你觉得你们小组做得最好的是哪几个原则? 请列出具体的事例. 照片 设想和目标 我们的 ...
- IntelliJ IDEA编辑器的使用技巧
目录 1. 使用技巧 1. 跳转小工具 2. 无处不在的跳转 3. 精准搜索 4. 列操作: 5. live template 6. postfix 7. ALT+ENTER智能提示,代码优化 8. ...
- spark 基本操作(二)
1.dataframe 基本操作 def main(args: Array[String]): Unit = { val spark = SparkSession.builder() .appName ...
- Linux低延迟服务器系统调优
最近做了一些系统和网络调优相关的测试,达到了期望的效果,有些感悟.同时,我也发现知乎上对Linux服务器低延迟技术的讨论比较欠缺(满嘴高并发现象):或者对现今cpu + 网卡的低延迟潜力认识不足(动辄 ...
- Scala Class etc. 2
Higher-Order Functions def 定义的是方法,而不是函数 函数可作为变量存在,可直接调用,也可作为值传递给其他函数 _ 后缀将普通方法变为函数: ceil _ 根据上下文编译器可 ...
- 【题解】Luogu P3349 [ZJOI2016]小星星
原题传送门 我们考虑设\(dp_{i,j}\)表示树上的点\(i\)在图上对应的点为\(j\)时\(i\)和子树对应在图上的方案数 \(dp_{u_i}=\prod_{v \in u.son} dp_ ...
- MQTT --- 操作行为
会话状态 为实现QoS等级1和QoS等级2协议流,客户端和服务端需要将状态与客户标识符相关联,这被称为会 话状态.服务端还将订阅信息存储为会话状态的一部分.会话可以跨越一系列的网络连接.它持续到最新的 ...
- MQTT --- Retained Message
保留消息定义 如果PUBLISH消息的RETAIN标记位被设置为1,则称该消息为“保留消息”: Broker会存储每个Topic的最后一条保留消息及其Qos,当订阅该Topic的客户端上线后,Brok ...
- Vertx与Spring配合完成DML操作
服务启动: public static void main( String[] args ) { ApplicationContext context = new AnnotationConfigAp ...