使用.addClass函数时，单击时不显示边框

在使用.addClass函数时，如果单击后不显示边框，可能是由于以下几个原因：

选择器问题：确保你使用的选择器正确地选中了你想要添加边框的元素。
CSS样式冲突：可能存在其他的CSS规则覆盖了你通过.addClass添加的边框样式。
JavaScript执行顺序：如果.addClass函数在DOM元素加载之前执行，那么它可能无法找到对应的元素。
JavaScript错误：可能存在JavaScript代码错误，导致.addClass函数没有被正确执行。

解决方法

1. 确保选择器正确

确保你使用的选择器能够准确地选中目标元素。例如：

$(document).ready(function() {
    $('button').click(function() {
        $(this).addClass('bordered');
    });
});

2. 检查CSS样式冲突

确保没有其他CSS规则覆盖了你添加的边框样式。例如：

.bordered {
    border: 2px solid red !important;
}

3. 确保DOM元素加载完成

确保.addClass函数在DOM元素加载完成后再执行。可以使用$(document).ready()来确保DOM加载完成后再绑定事件：

$(document).ready(function() {
    $('button').click(function() {
        $(this).addClass('bordered');
    });
});

4. 检查JavaScript错误

打开浏览器的开发者工具（通常按F12或右键选择“检查”），查看控制台是否有JavaScript错误。如果有错误，修复这些错误后再尝试。

示例代码

以下是一个完整的示例，展示了如何在单击按钮时添加边框：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title> Add Class Example </title>
    <style>
        .bordered {
            border: 2px solid red;
        }
    </style>
    <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
</head>
<body>
    <button>Click me</button>

    <script>
        $(document).ready(function() {
            $('button').click(function() {
                $(this).addClass('bordered');
            });
        });
    </script>
</body>
</html>

参考链接

通过以上步骤，你应该能够解决单击时不显示边框的问题。如果问题仍然存在，请检查是否有其他JavaScript代码或CSS样式影响了结果。

页面内容是否对你有帮助？

有帮助

没帮助

使用.addClass函数时，单击时不显示边框

、、

所以我有一个核对表，当点击下一步时，如果所有的复选框都没有被选中，它需要高亮显示/给那个复选框按钮以红色的边框。我创建了一个名为changeboxcolor的css类，但是当我将它添加到该框中时，颜色不会在检查中更改，它显示类已添加，但边框不会显示。== $(".check_list_1").length){ $(".check_list_1").addClass("cha

浏览 41提问于2019-04-25得票数 2

回答已采纳

4回答

有没有什么内置的jQuery函数可以突出显示表单域的边框？

在不使用任何插件的情况下，jQuery或jQuery UI中是否有内置函数来实现您在等网站上看到的表单字段边框突出显示效果？哦，

浏览 3提问于2010-09-14得票数 0

回答已采纳

2回答

为什么addClass不优先显示边框？

、、

click(function () { "height": "45px",}, 100); $(this).addClass1)为什么在单击时出现蓝色边框，尽管我已经完成了边框:无。2)为什么"lg“类不优先显示绿色按钮，因为理想情况下，红色首先是颜色设置，然后是绿色，这是最后一条规则，优

浏览 4提问于2014-12-28得票数 1

回答已采纳

4回答

如何使用if语句删除和添加类？

、、、

我正在尝试根据两个标题中单击的内容来更改类。下面是JSFiddle：，我给出了一个例子，它也是我想要实现的目标。if($('#page_headings h2').hasClass('no_highlight')){ $(this).remov

浏览 11提问于2014-08-18得票数 0

回答已采纳

1回答

单击时重置addClass函数

、、、、

因此，我有一个函数，可以使图像不可见，同时开始播放它下面的视频(6个中的1个)。它工作得很好，div淡出，然后就可以播放了。然而，它只在第一次起作用。因此，在每次点击时都会进行一次排序的小型重置。 myVideo.src = videos[numb]; $('#MyT').addClass这是针对iPad的，我还没有找到更好的方法来避免视频加载

浏览 0提问于2012-05-07得票数 0

回答已采纳

2回答

如何添加阈值onclick() jQuery？

、、、、

问题是，如果我通过单击和拖动图片将滑块移动到另一个页面，则会选择这个。 $(this).removeClass("selected"); $(this).addClass

浏览 2提问于2014-03-19得票数 1

回答已采纳

1回答

使用jQueryUI为borderColor设置动画

、

我有一系列的div，我想用蓝色边框突出显示，在mouseenter上设置动画，在mouseleave上设置动画。当一个div被单击时，它应该保持它的边框，直到一个新的div被单击，然后将之前的选择动画化为白色边框。使用以下代码，边框会淡入，但不会淡出： if (!{ $('.sel').not(this).stop().animate

浏览 1提问于2011-12-15得票数 0

回答已采纳

4回答

Javascript显示/隐藏文本输入边框

、、、

我看过很多关于使用Javascript在网页上显示/隐藏内容的问题，但没有一个问题专门讨论如何显示/隐藏文本输入边框。当页面加载时，我不希望文本输入边框可见。单击按钮时，我希望它更改文本输入边框的状态(IE:如果单击按钮时没有显示文本输入边框，则调用javascript函数</e

浏览 0提问于2019-06-11得票数 0

回答已采纳

3回答

Jquery在div中显示和隐藏边框。

、

我试着用div显示边框，当我单击其中一个时，每次单击时都隐藏在另一个。idimg).click(function() jQuery(this).removeClass('active') <script>remove('4')</script> <di

浏览 3提问于2015-02-20得票数 2

3回答

如何使用jQuery选择每个同级的子标签？

、、

当我单击表格单元格时，我想要为单击的<td>添加一个黑色边框，并从单击的行(但不是其他行)中可能已经有黑色边框的任何单元格中删除黑色边框。我该怎么做呢？jQuery (不工作)：$(document).ready(function() {

浏览 0提问于2012-10-11得票数 1

回答已采纳

4回答

IE下的JQuery

、

我正在使用带有css的JQuery在页面上使用单击命令显示div。 function(){ $('#img_shower_1').addClass('img_shower_vis'); $('#close_

浏览 0提问于2009-10-25得票数 0

回答已采纳

1回答

磁性弹出窗口，选择最后显示的图像

、、、

我有一个缩略图列表，当单击其中一个缩略图时，它会在弹出窗口中显示带有Magnific弹出窗口的图像。function SelectPicture(picture_id) {$("li#picture_"+picture_id).a

浏览 3提问于2018-11-05得票数 2

2回答

jquery最后一个子边框if..else

、、

aa"> </div> </div>jQuery if($('.bb:last').hasClass('

浏览 5提问于2013-04-18得票数 0

回答已采纳

2回答

单击链接后的按钮更改功能

、、

一切都很正常，但是当点击一个按钮链接时，这个功能就被破坏了…if($(this).hasClass('active')){ } else { $(this).addClass

浏览 3提问于2016-01-13得票数 0

4回答

使用JQuery遍历图像

、、、、

我尝试使用CSS next()一次将JQuery添加到一个图像中，突出显示它。当用户单击一个按钮时，它应该突出显示带有边框的next()图像。相反，它会突出显示它后面的所有图像。$('#imageList img').next().addClass('selected'); 它会将类添加到所有图像中。

浏览 0提问于2011-07-15得票数 1

回答已采纳

3回答

使用JQuery向TR添加/删除边框

请参阅以下JSFiddle：$('.tr1').addClass('addBorder'); $('.tr1').addClass('addBorder'); $('.tr2').addClass(

浏览 2提问于2013-05-14得票数 0

回答已采纳

1回答

jQuery .removeClass()无法正常工作

、

我正在做一些自定义表单验证，并突出显示用户仍然需要填写的区域。我使用.addClass方法向字段集添加了一个类，该方法将字段集周围的边框更改为红色。当用户单击submit按钮时，我将运行一个函数，该函数首先清除验证css类，然后重新检查表单以查看用户是否有正确的输入。调用removeClass()时，边框不会变回原始颜色。它一直是红色的。//Add $('#jdeABFieldSet&#

浏览 2提问于2017-01-07得票数 1

2回答

移除导航中链接之间的最后一条。

、

我可以删除最后一个边框，但可以在“链接6”之后删除边框，然后在调整页面大小时，删除该行最后一个链接上的边框。

浏览 5提问于2015-06-29得票数 0

回答已采纳

1回答

打开另一个类时关闭jQuery slideToggle +切换类

、

我将在几页上有很多这样的代码，所以我不希望每一页都重复这段代码。另外，我不能使用.next()；或者任何类似的东西，因为在单击时将打开的一些内容div并不直接位于切换链接的下方。小提琴中的代码在执行之前在所有div上使用hide()；但是由于某种原因，类“删除边框”在执行时不能可靠地工作。您可以看到，如果您多次单击同一项，边框就会出现并消失。这应该会产生标签效果，所以当点击链接时边框消失并重新出现是必不可少的。我<

浏览 3提问于2015-11-10得票数 0

回答已采纳

3回答

在JS单击添加边框后填充“使项目移动”

、、

当您显示子菜单时，不带任何边框就会显示li。使用简单的javascript代码，当您单击li时，我会这样做： border: 1px solid rgb(173, 178, 178); $this.removeClass("actif-link");

浏览 3提问于2015-06-23得票数 2

回答已采纳

点击加载更多

扫码

添加站长进交流群

领取专属 10元无门槛券

手把手带您无忧上云

使用.addClass函数时，单击时不显示边框

解决方法

1. 确保选择器正确

2. 检查CSS样式冲突

3. 确保DOM元素加载完成

4. 检查JavaScript错误

示例代码

参考链接

社区

活动

资源

关于

腾讯云开发者

热门产品

热门推荐

更多推荐