html - 使用 CSS 突出显示单击按钮
问题描述
我有多项选择,希望能够单击它来管理 /getmatch 页面上的答案。目前我没有视觉提示我选择了一些东西:
[ ]] 1
那么如何使多个项目的选择具有响应性呢?
以下是提供这些按钮的页面中的代码:
{% extends "todo/base.html" %}
{% block content %}
<style>
.elements {
display: block;
}
ul.items {
display: flex;
margin: 0;
padding: 0;
list-style: none;
}
li.item {
flex: 1 0 20%;
padding: 8px;
margin: 2px;
border-radius: 8px;
border: 1px solid rgba(61, 86, 233, 0.3);
text-align: center;
}
.col {
display: flex;
flex-direction: column;
align-items: center;
}
</style>
<!-- Header -->
<header class="intro-header">
<div class="container">
<div class="col-lg-5 mr-auto order-lg-2">
<h3><br>Tell me something about you... </h3>
</div>
</div>
</header>
<!-- Page Content -->
<section class="content-section-a">
<div class="container">
<dt>
<span>Pick the keywords you want to express when wearing perfume</span>
</dt>
<form action = "/getmatch" method="POST">
{% for keyword in keywords %}
<div class="elements">
<ul class="items ">
<li class="item col-xs-6 col-sm-3 col-md-3 col-lg-3">
<div class="box">
<div data-toogle="buttons" class="col">
<span>{{ keyword.title }}</span>
</div>
</div>
</li>
</ul>
</div>
{% endfor %}
{% csrf_token %}
<button type="submit">Envoyer</button>
</form>
</div>
</section>
<!-- Bootstrap core JavaScript -->
<script src="static/vendor/jquery/jquery.min.js"></script>
<script src="static/vendor/popper/popper.min.js"></script>
<script src="static/vendor/bootstrap/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/flexboxgrid/6.3.1/flexboxgrid.min.css" type="text/css" >
{% endblock %}
我试图在 balisa 中添加一些东西。
button:hover{background-color:orange;}
button:focus{background-color:red;}
但它没有修改任何东西
解决方案
我无法添加评论,因为我没有所需的代表点(堆栈溢出的新手,抱歉,如果不允许这样做),但我不确定你想要做什么,如果你想给一次为多个按钮选择一个按钮的视觉提示,您需要获取按钮列表,在单击时添加一个事件侦听器来切换类的开/关,然后为该类添加样式,以便当项目具有该类时,它具有特定的样式。
编辑如何做到这一点:PS我从来没有使用过Django,但我认为你应该这样做,因为你这样做的方式是为每个关键字生成一个ul
<form action = "/getmatch" method="POST">
<div class="elements">
<ul class="items ">
{% for keyword in keywords %}
<li class="item col-xs-6 col-sm-3 col-md-3 col-lg-3">
<div class="box">
<div data-toogle="buttons" class="col">
<span>{{ keyword.title }}</span>
</div>
</div>
</li>
{% endfor %}
</ul>
</div>
{% csrf_token %}
<button type="submit">Envoyer</button>
</form>
现在您需要选择列表元素,一种更简单的方法是称为事件委托https://javascript.info/event-delegation 所以创建一个脚本标签/或文件并将其导入,在您需要的脚本中下列的 :
//Select the UL list
const myItemsList = document.querySelector(".items");
//function passed to event listener as callback, toggles the selected class if the target is a list
const toggleListClass = (event) => {
let target = event.target;
if (target.tagName !== "li") return;
target.classList.toggle("highlight");
};
//Add an event listener to the ul list
myItemsList.addEventListener("click", toggleListClass);
现在在你的 css 中为类高亮添加一个选择器
.hightlight {
color: whatever
}
推荐阅读
- python - 我们应该在 ItemPipeline 中还是在蜘蛛本身中处理抓取的数据?
- monitoring - 网址监控 splunk
- javascript - 如何在 NodeJS Express 中与 res.redirect 一起发送附加数据?
- python - 使用一列中的范围和其他列上的数学运算符合并行
- javascript - Next.js 中具有简单逻辑的多步测验
- python - 网络抓取并仅提取文本而不是数字
- javascript - 在 MongoDB 中将用户指定的 JSON 存储为 BSON 对象而不进行任何过滤是否安全,或者我应该在存储之前进行字符串化
- java - 杰克逊在反序列化时忽略子类型属性
- c# - 需要为 Enqueue 和 Dequeue 方法生成语法,以便在 Visual Studio 中运行单元测试
- java - 类样本中的方法总和不能应用于给定类型