前往小程序,Get更优阅读体验!
立即前往
首页
学习
活动
专区
圈层
工具
发布
首页
学习
活动
专区
圈层
工具
MCP广场
社区首页 >专栏 >Django bootstrap按钮点击后激活active

Django bootstrap按钮点击后激活active

作者头像
marsggbo
发布于 2019-08-14 08:04:42
发布于 2019-08-14 08:04:42
1.3K00
代码可运行
举报
运行总次数:0
代码可运行

现在有个需求,就是在导航栏上有若干个按钮,我想实现的功能是当点击某个按钮后修改文字颜色,这样网站会更人性化。现总结方法如下:

index.html:

代码语言:javascript
代码运行次数:0
运行
AI代码解释
复制
<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

代码语言:javascript
代码运行次数:0
运行
AI代码解释
复制
def home(reqeust):
    isactive = "home"
    return render(request, "home.html", {"isactive":isactive})
    
def about(reqeust):
    isactive = "about"
    return render(request, "about.html", {"isactive":isactive})
本文参与 腾讯云自媒体同步曝光计划,分享自作者个人站点/博客。
原始发表:2019-08-12 ,如有侵权请联系 cloudcommunity@tencent.com 删除

本文分享自 作者个人站点/博客 前往查看

如有侵权,请联系 cloudcommunity@tencent.com 删除。

本文参与 腾讯云自媒体同步曝光计划  ,欢迎热爱写作的你一起参与!

评论
登录后参与评论
暂无评论
推荐阅读
编辑精选文章
换一批
Django bootstrap按钮点击后激活active
现在有个需求,就是在导航栏上有若干个按钮,我想实现的功能是当点击某个按钮后修改文字颜色,这样网站会更人性化。现总结方法如下:
marsggbo
2019/08/12
1.1K0
Django bootstrap按钮点击后激活active
Python Django个人网站搭建17-优化导航栏2
作者: zifanwang  发布于2020-05-25
zifan
2021/12/14
5650
Python Django个人网站搭建17-优化导航栏2
flask base.html解析(flask 47)
{% from 'bootstrap/nav.html' import render_nav_item %} <!DOCTYPE html> <html lang="en"> <head> {% block head %} <meta name="viewport" content="width=device-width,initial-scale=1,shrink-to-fit=no"> <title>{% block title %}{% endblock title %} - {{ admin.blog_title|default('Blog Title') }}</title> <link rel="icon" href="{{ url_for('static',filename='favicon.ico') }}"> <link rel="stylesheet" href="{{ url_for('static',filename='css/%s.min.css' % request.cookies.get('theme','perfect_blue')) }}" type="text/css"> <link rel="stylesheet" href="{{ url_for('static',filename='css/style.css') }}" type="text/css"> {% endblock head %} </head> <body> {% block nav %} <nav class="navbar navbar-expand-lg navbar-dark bg-primary"> <div class="container"> <a class="navbar-brand" href="{{ url_for('blog.index') }}"> {{ admin.blog_title }} </a> <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarColor01" aria-controls="navbarColor01" aria-expanded="false" aria-label="Toggle navigation"> <span class="navbar-toggler-icon"></span> </button> <div class="collapse navbar-collapse" id="navbarColor01"> <ul class="navbar-nav mr-auto"> {{ render_nav_item('blog.index', 'Home') }} {{ render_nav_item('blog.about', 'About') }} </ul> <ul class="nav navbar-nav navbar-right"> {% if current_user.is_authenticated %} <li class="nav-item dropdown"> <a href="#" class="nav-link dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false"> New <span class="caret"></span> </a> <div class="dropdown-menu" aria-labelledby="navbarDropdown"> <a class="dropdown-item" href="{{ url_for('admin.new_post') }}">Post</a> <a class="dropdown-item" href="{{ url_for('admin.new_category') }}">Category</a> <a class="dropdown-item" href="{{ url_for('admin.new_link') }}">Link</a> </div> </li> <li class="nav-item dropdown"> <a href="#" class="nav-link dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false"> Manage <span class="
用户5760343
2019/08/15
7620
使用boostrap制作导航栏
效果展示 我们常常看见这样的导航栏的结构,基本上都是一个模板里面做出来的,现在就教大家怎么制作这样的模板。
GeekLiHua
2025/01/21
1620
使用boostrap制作导航栏
一个完整的Django入门指南(二)
第三部分 Introduction        In this tutorial, we are going to dive deep into two fundamental concepts: URLs and Forms. In the process, we are going to explore many other concepts like creating reusable templates and installing third-party libraries. We are a
zhang_derek
2018/04/11
3.3K0
一个完整的Django入门指南(二)
Python Django个人网站搭建9-对用户注册和删除的实现
作者: zifanwang  发布于2020-05-15
zifan
2021/12/14
1K0
Python Django个人网站搭建9-对用户注册和删除的实现
Java Web 实现导航栏 active 状态随着页面自动切换
https://github.com/EasyKotlin/chatper15_net_io_img_crawler
一个会写诗的程序员
2018/08/17
1.2K0
Java Web 实现导航栏 active 状态随着页面自动切换
bootstrap5基本使用
container是最基本的布局。 给一个元素的class赋值为container之后,如果显示屏幕小于576,元素将要横向占满屏幕,但是大于576小于576像素的时候,宽度恒定为540,。就是说你的屏幕很宽的时候,元素永远不会横向占满整个屏幕,与边距有孔隙。但是赋值为.container-fluid的时候,元素永远横向占满屏幕,不会留有孔隙。
Crayon鑫
2023/10/10
6510
bootstrap5基本使用
Flask 系列之 LoginManag
通过使用 flask-login 进行会话管理的相关操作,并完成用户合法性登陆和退出。
py3study
2020/01/16
4840
创建基于PHP的多接口MD5解密工具
最近,我在折腾MD5解密平台,突然想到好多年前的一个名为 Md5Decrypt 的GitHub项目,它是一个使用多个在线API来解密MD5的开源工具。受到启发,我决定写一份PHP版本的多接口MD5解密工具。在这篇博文中,我将详细介绍构建这个工具的过程。
C4rpeDime
2025/01/02
1360
挑战30天学完Python:Day26 Python Web 服务
Python本身是一种通用的语言,可以用于很多的地方。在本篇中,我们将看到如何在Web开发中使用Python。它有很多的web架构框架。Django和Flask是比较流行。接下来我们就看看如何使用Flask进行web的开发。
MegaQi
2023/10/21
2550
挑战30天学完Python:Day26 Python Web 服务
Python Django个人网站搭建15-优化导航栏1
作者: zifanwang  发布于2020-05-22
zifan
2021/12/14
6070
Python Django个人网站搭建15-优化导航栏1
网页设计期末课程大作业:基于HTML+CSS+JavaScript+Bootstrap制作响应式网站信息技术交流博客(7页)
✍️ 作者简介: 一个热爱把逻辑思维转变为代码的技术博主 💂 作者主页: 【主页——🚀获取更多优质源码】 🎓 web前端期末大作业: 【📚毕设项目精品实战案例 (1000套) 】 🧡 程序员有趣的告白方式:【💌HTML七夕情人节表白网页制作 (110套) 】 🌎超炫酷的Echarts大屏可视化源码:【🔰 echarts大屏展示大数据平台可视化(150套) 】 🎁 免费且实用的WEB前端学习指南: 【📂web前端零基础到高级学习视频教程 120G干货分享】 🥇 关于作者: 💬历任研发工
IT司马青衫
2022/08/23
6310
网页设计期末课程大作业:基于HTML+CSS+JavaScript+Bootstrap制作响应式网站信息技术交流博客(7页)
[物联网loT]树莓派实现局域网内LED亮灭
[思路]:树莓派安装express服务器,访问服务器,与服务器交互,从而控制硬件,最终实现树莓派引脚电平控制,进而实现与树莓派电路板引脚相连的LED亮与灭。
周星星9527
2019/08/27
1.4K0
[物联网loT]树莓派实现局域网内LED亮灭
用VSCode开发一个基于asp.net core 2.0/sql server linux(docker)/ng5/bs4的项目(2)
为Domain Model添加约束 前一部分, 我们已经把数据库创建出来了. 那么我们先看看这个数据库. 可以在项目里面建立一个database.sql, 并且建立一个数据库连接的profile(参考
solenovex
2018/03/29
2.5K0
用VSCode开发一个基于asp.net core 2.0/sql server linux(docker)/ng5/bs4的项目(2)
wordpress输出导航菜单
更多参照 https://developer.wordpress.org/reference/functions/wp_get_nav_menu_items/
切图仔
2022/09/14
1.9K0
wordpress输出导航菜单
Python Django个人网站搭建5-编写文章详情页面并支持markdown语法
作者: zifanwang  发布于2020-05-09
zifan
2021/12/14
4830
Python Django个人网站搭建5-编写文章详情页面并支持markdown语法
在博客后台为内容模块实现增删改查功能
作为 PHP 博客实战项目的终结篇,我们将在后台管理系统为专辑、文章、消息模块添加增删改查功能,来完成内容生产和消费的闭环。
学院君
2020/10/19
2.3K0
在博客后台为内容模块实现增删改查功能
Rails 7 中引入 Bootstrap 5
在 Rails 6 中有两种不同的工具可以用来管理前端的 CSS、JavaScript 以及 images 等资源,分别是 “Sprockets” 和 “Webpacker”,“Sprockets” 除了 Rails 应用外很少使用,但是 “Webpacker” 不仅在 Rails 中,在其他应用框架中也被广泛的使用。
RiemannHypothesis
2023/02/20
3.4K0
Rails 7 中引入 Bootstrap 5
Bootstrap实用功能总结
1、定义折叠按钮时除了折叠的属性之外,还必须加上样式: .navbar-toggler
菲宇
2020/08/02
2.6K0
推荐阅读
相关推荐
Django bootstrap按钮点击后激活active
更多 >
领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档
本文部分代码块支持一键运行,欢迎体验
本文部分代码块支持一键运行,欢迎体验