javascript - 如何将活动类添加到当前元素?
问题描述
我创建了一个带有类名的按钮,我也创建了 jquery 和 css 但是为什么不能激活
这是我的 html 代码
<div class="landing-pages-button-content">
<a class="btn" id="semua">Semua</a>
<a class="btn" id="pria">Pria</a>
<a class="btn" id="wanita">Wanita</a>
</div>
这个 id 我的 css 文件
.active, .btn:hover {background-color: #ff7400;color: white; border: none;}
最后这是我的 jquery
$(document).ready(function () {
$(".btn").click(function () {
$(this).addClass("active");
$(".btn").not(this).removeClass("active");
});
);
解决方案
因为您在 css 中设置了悬停,并且您缺少 end ready 的“}”。请尝试代码:
$(document).ready(function () {
$(".btn").click(function () {
$(this).addClass("active");
$(".btn").not(this).removeClass("active");
});
});
.active{background-color: #ff7400;color: white; border: none;}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.1/jquery.min.js"></script>
<div class="landing-pages-button-content">
<a class="btn" id="semua">Semua</a>
<a class="btn" id="pria">Pria</a>
<a class="btn" id="wanita">Wanita</a>
</div>
推荐阅读
- tiff - 为 EXIF 找到 TIFF 标头中的字节顺序 0x49 0x01
- php - 我应该如何模拟这种关系?
- c# - 'await response.Content.ReadAsAsync 的 .net5 替代品是什么
()' - c++ - 整个范围内的 std::for_each 没有方便的重载?
- python - 使用 OpenCV 在 python 中显示孔填充图像
- laravel - 错误 vendor\laravel\framework\src\Illuminate\Container\Container.php:833 在 laravel
- sql - 如何修复我的 SQL 语句以获得正确的 XML 格式?
- html - 当我不想要它时,我的下拉菜单不断出现
- node.js - 在保存用户之前检查 mongoose 的 2 个字段(使用 passportjs)
- arrays - 在链表函数中找不到内存泄漏“1 个块中的 16 个字节肯定在丢失记录 1 of 1 中丢失”