blocks|key|4110358|text|试试这个：|type|unstyled|depth|inlineStyleRanges|entityRanges|data|4110359|​|4110360|//+The+class+div+class+is+the+div+tag+if+you+want+and+Id+replace
//+Replace+the+.+with+a+#
$(".the_div_class").click(()=>{
++$(".the_div_class").addClass("the_border_class");
});|code-block|syntax|javascript|4110361|<script+src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>|4110362|4110363|entityMap^0|0|0|0|0|0^^$0|@$1|2|3|4|5|6|7|N|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|O|8|@]|9|@]|A|$]]|$1|D|3|E|5|F|7|P|8|@]|9|@]|A|$G|H]]|$1|I|3|J|5|F|7|Q|8|@]|9|@]|A|$G|H]]|$1|K|3|C|5|6|7|R|8|@]|9|@]|A|$]]|$1|L|3|-4|5|6|7|S|8|@]|9|@]|A|$]]]|M|$]]

<p>Try this:</p>

<p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
<div class="snippet-code">
<pre class="snippet-code-js lang-js prettyprint-override"><code>// The class div class is the div tag if you want and Id replace
// Replace the . with a #
$(".the_div_class").click(()=&gt;{
  $(".the_div_class").addClass("the_border_class");
});</code></pre>
<pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"&gt;&lt;/script&gt;</code></pre>
</div>
</div>
</p>


blocks|key|329830|text|​|type|unstyled|depth|inlineStyleRanges|entityRanges|data|329831|$(".mydiv").click(function(){

$(this).css('border','10px+solid+black');

});|code-block|syntax|javascript|329832|.mydiv
{
width:100px;
height:100px;
background-color:yellow;
}|329833|<script+src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<!DOCTYPE+html>
<html+lang="en">
<head>
++<title>Bootstrap+Example</title>
</head>
<body>
<div+class="mydiv">ABCD</div>

</body>
</html>|329834|329835|entityMap^0|0|0|0|0|0^^$0|@$1|2|3|4|5|6|7|N|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|O|8|@]|9|@]|A|$E|F]]|$1|G|3|H|5|D|7|P|8|@]|9|@]|A|$E|F]]|$1|I|3|J|5|D|7|Q|8|@]|9|@]|A|$E|F]]|$1|K|3|4|5|6|7|R|8|@]|9|@]|A|$]]|$1|L|3|-4|5|6|7|S|8|@]|9|@]|A|$]]]|M|$]]

<p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
<div class="snippet-code">
<pre class="snippet-code-js lang-js prettyprint-override"><code>$(".mydiv").click(function(){

$(this).css('border','10px solid black');

});</code></pre>
<pre class="snippet-code-css lang-css prettyprint-override"><code>.mydiv
{
width:100px;
height:100px;
background-color:yellow;
}</code></pre>
<pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"&gt;&lt;/script&gt;
&lt;!DOCTYPE html&gt;
&lt;html lang="en"&gt;
&lt;head&gt;
  &lt;title&gt;Bootstrap Example&lt;/title&gt;
&lt;/head&gt;
&lt;body&gt;
&lt;div class="mydiv"&gt;ABCD&lt;/div&gt;

&lt;/body&gt;
&lt;/html&gt;</code></pre>
</div>
</div>
</p>


blocks|key|4110378|text|您可以在java+script中编写-|type|unstyled|depth|inlineStyleRanges|offset|length|style|BOLD|entityRanges|data|4110379|let+yourDivIds+=["your_div1","your_div2"];++//+specify+all+your+div+ids

function+removeGlowingDivs()+{+//+this+will+remove+class+from+other+div's
++++yourDivIds.forEach(item=>{
++++++++document.getElementById(divID).removeClass('your_class_name');
++++})
}

//+add+this+on+click+event+on+all+div's
function+highlightDiv(divID)+{+//+this+will+add+class

++++removeGlowingDivs();
++++document.getElementById(divID).addClass('your_class_name');
}|code-block|syntax|javascript|4110380|entityMap^0|4|B|0|0^^$0|@$1|2|3|4|5|6|7|M|8|@$9|N|A|O|B|C]]|D|@]|E|$]]|$1|F|3|G|5|H|7|P|8|@]|D|@]|E|$I|J]]|$1|K|3|-4|5|6|7|Q|8|@]|D|@]|E|$]]]|L|$]]

<p>you can write in <strong>java script</strong> -</p>

<pre><code>let yourDivIds =["your_div1","your_div2"];  // specify all your div ids

function removeGlowingDivs() { // this will remove class from other div's
    yourDivIds.forEach(item=&gt;{
        document.getElementById(divID).removeClass('your_class_name');
    })
}

// add this on click event on all div's
function highlightDiv(divID) { // this will add class

    removeGlowingDivs();
    document.getElementById(divID).addClass('your_class_name');
}
</code></pre>


blocks|key|2670551|text|<style>
.mydiv+{
++width:100px;
++height:100px;
++background-color:yellow;
++float:left;
++margin:10px;
}
.active{
++border:+10px+solid+black;
}
</style>

<div+class="mydiv">A</div>
<div+class="mydiv">B</div>
<div+class="mydiv">C</div>

<script>
++$(".mydiv").click(function(){

++++$(".mydiv").removeClass('active');
++++$(this).addClass('active');

++});
</script>|type|code-block|depth|inlineStyleRanges|entityRanges|data|syntax|javascript|2670552|unstyled|entityMap^0|0^^$0|@$1|2|3|4|5|6|7|G|8|@]|9|@]|A|$B|C]]|$1|D|3|-4|5|E|7|H|8|@]|9|@]|A|$]]]|F|$]]

<pre><code>&lt;style&gt;
.mydiv {
  width:100px;
  height:100px;
  background-color:yellow;
  float:left;
  margin:10px;
}
.active{
  border: 10px solid black;
}
&lt;/style&gt;

&lt;div class="mydiv"&gt;A&lt;/div&gt;
&lt;div class="mydiv"&gt;B&lt;/div&gt;
&lt;div class="mydiv"&gt;C&lt;/div&gt;

&lt;script&gt;
  $(".mydiv").click(function(){

    $(".mydiv").removeClass('active');
    $(this).addClass('active');

  });
&lt;/script&gt;
</code></pre>


blocks|key|329860|text|++++$('div').click(function(){
+++++++$('div').css('border',+'none');
+++++++$(this).css('border',+'1px+solid+black');
++++});|type|code-block|depth|inlineStyleRanges|entityRanges|data|syntax|javascript|329861|注意:将$(div)替换为相关父元素的ID或类。|unstyled|offset|length|style|CODE|329862|entityMap^0|0|4|6|0^^$0|@$1|2|3|4|5|6|7|M|8|@]|9|@]|A|$B|C]]|$1|D|3|E|5|F|7|N|8|@$G|O|H|P|I|J]]|9|@]|A|$]]|$1|K|3|-4|5|F|7|Q|8|@]|9|@]|A|$]]]|L|$]]

<pre class="lang-js prettyprint-override"><code>
    $('div').click(function(){
       $('div').css('border', 'none');
       $(this).css('border', '1px solid black');
    });
</code></pre>

<p>NOTE: Replace the <code>$(div)</code> with the relevant parent element's ID or class.</p>


blocks|key|4110417|text|请看下面的代码片段，看看我的尝试。它所做的是，一旦您使用类clickable单击某个div，代码就会从前一个div中删除border类，将border类添加到新单击的div中，并更新prevDiv。|type|unstyled|depth|inlineStyleRanges|offset|length|style|CODE|entityRanges|data|4110418|我更喜欢这种方法，因为当其他人使用$('div').css('border',+'none');从每个div中删除所有边框时，此代码仅从先前单击的div中删除边框。从而允许您拥有具有预定义的border/border类的(非clickable)+div。|4110419|​|4110420|let+prevDiv;

$(".clickable").click(function(){
++$(prevDiv).removeClass('border');
++$(this).addClass('border');
++
++prevDiv+=+$(this);
});|code-block|syntax|javascript|4110421|.clickable+{
++width:100px;
++height:100px;
++margin:+10px;
++display:+inline-block;
++margin-right:+25px;
}

.border+{
++border:+5px+solid+black;
}

#firstID+{
++background-color:+red;
}

#secondID+{
++background-color:+orange;
}

#thirdID+{
++background-color:+lime;
}|4110422|<script+src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<div+class="clickable"+id="firstID">Placeholder+text</div>
<div+class="clickable"+id="secondID">Placeholder+text</div>
<div+class="clickable"+id="thirdID">Placeholder+text</div>|4110423|4110424|entityMap^0|T|9|1O|6|1X|6|2J|7|0|H|V|2U|6|34|9|0|0|0|0|0|0^^$0|@$1|2|3|4|5|6|7|V|8|@$9|W|A|X|B|C]|$9|Y|A|Z|B|C]|$9|10|A|11|B|C]|$9|12|A|13|B|C]]|D|@]|E|$]]|$1|F|3|G|5|6|7|14|8|@$9|15|A|16|B|C]|$9|17|A|18|B|C]|$9|19|A|1A|B|C]]|D|@]|E|$]]|$1|H|3|I|5|6|7|1B|8|@]|D|@]|E|$]]|$1|J|3|K|5|L|7|1C|8|@]|D|@]|E|$M|N]]|$1|O|3|P|5|L|7|1D|8|@]|D|@]|E|$M|N]]|$1|Q|3|R|5|L|7|1E|8|@]|D|@]|E|$M|N]]|$1|S|3|I|5|6|7|1F|8|@]|D|@]|E|$]]|$1|T|3|-4|5|6|7|1G|8|@]|D|@]|E|$]]]|U|$]]

<p>Look at the snippet below to see my attempt. What it does is once you click on a div with the class <code>clickable</code> the code removes the <code>border</code> class from the previous div, adds the <code>border</code> class to the newly clicked div and updates the <code>prevDiv</code>.</p>

<p>I prefer this method because where other people use <code>$('div').css('border', 'none');</code> to remove all the borders from every div, this code only removes the border from the previously clicked div. Thus allowing you to have (non <code>clickable</code>) divs with a predefined border/<code>border</code> class.</p>

<p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
<div class="snippet-code">
<pre class="snippet-code-js lang-js prettyprint-override"><code>let prevDiv;

$(".clickable").click(function(){
  $(prevDiv).removeClass('border');
  $(this).addClass('border');
  
  prevDiv = $(this);
});</code></pre>
<pre class="snippet-code-css lang-css prettyprint-override"><code>.clickable {
  width:100px;
  height:100px;
  margin: 10px;
  display: inline-block;
  margin-right: 25px;
}

.border {
  border: 5px solid black;
}

#firstID {
  background-color: red;
}

#secondID {
  background-color: orange;
}

#thirdID {
  background-color: lime;
}</code></pre>
<pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"&gt;&lt;/script&gt;

&lt;div class="clickable" id="firstID"&gt;Placeholder text&lt;/div&gt;
&lt;div class="clickable" id="secondID"&gt;Placeholder text&lt;/div&gt;
&lt;div class="clickable" id="thirdID"&gt;Placeholder text&lt;/div&gt;</code></pre>
</div>
</div>
</p>


<p>I need a help in this jquery or javascript problem. I have many divs with some particular ids and onclick that div the border should get changed and onclick another div with different id the border of that div again get changed like previous div but border of previous div get removed.</p>


how to show border of clicked div only?

翻译质量差，导致语言生硬或混乱。

没有提供实际的解决方法或示例。

解答不清晰，无法理解或解决问题。

页面排版不美观，阅读体验差。

文章

问答

视频

学习中心

腾讯云实验室

直播

竞赛

腾讯云代码分析专区

腾讯iOA零信任安全管理系统专区

腾讯云架构师技术同盟交流圈

腾讯云数据库专区

腾讯云顾问专区

腾讯云原生专区

腾讯混元专区

腾讯云TCE专区

腾讯云Lighthouse专区

腾讯云HAI专区

腾讯云Edgeone专区

腾讯云存储专区

腾讯云智能专区

腾讯轻联专区 

腾讯云开发专区

TAPD专区

腾讯轻量云游戏服专区

腾讯云最具价值专家

腾讯云架构师技术同盟

腾讯云创作之星

腾讯云开发者先锋

腾讯云代码助手

云原生构建

TAPD 敏捷项目管理

Cloud Studio

SDK中心

API中心

命令行工具

涵盖代码开发、场景应用、自动测试全流程，助你从零构建专属AI助手

一站式MCP教程库，解锁AI应用新玩法

我需要在这个jquery或javascript问题上的帮助。我有许多带有一些特定id的div，单击div，边框应该改变，然后单击另一个具有不同id的div，那个div的边框再次改变，就像以前的div一样，但是以前的div的边框被移除了。

问如何只显示被点击的div的边框？
EN

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问如何只显示被点击的div的边框？EN