blocks|key|4404304|text|试试这个..。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|4404305|$(".tabs").click(function(){
$(".active").removeClass("active");
$(this).addClass("active");
});|code-block|syntax|javascript|4404306|它会将.active类分配给你点击的元素，然后你的CSS就会被应用。|offset|length|style|CODE|4404307|entityMap^0|0|0|3|7|0^^$0|@$1|2|3|4|5|6|7|O|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|P|8|@]|9|@]|A|$E|F]]|$1|G|3|H|5|6|7|Q|8|@$I|R|J|S|K|L]]|9|@]|A|$]]|$1|M|3|-4|5|6|7|T|8|@]|9|@]|A|$]]]|N|$]]

<p>Try this..</p>

<pre><code>$(".tabs").click(function(){
$(".active").removeClass("active");
$(this).addClass("active");
});
</code></pre>

<p>It will assign <code>.active</code> class to your clicked element and your CSS will be applied.</p>


blocks|key|4404319|text|$(document).ready(function+()+{
$('#menu+ul+li+a').click(function+(ev)+{
++++$('#menu+ul+li').removeClass('selected');
++++$(ev.currentTarget).parent('li').addClass('selected');
});|type|code-block|depth|inlineStyleRanges|entityRanges|data|syntax|javascript|4404320|})；|unstyled|4404321|enter+link+description+here|offset|length|4404322|entityMap|0|LINK|mutability|MUTABLE|url|https://jsfiddle.net/taditdash/LrMsA/^0|0|0|0|R|0|0^^$0|@$1|2|3|4|5|6|7|S|8|@]|9|@]|A|$B|C]]|$1|D|3|E|5|F|7|T|8|@]|9|@]|A|$]]|$1|G|3|H|5|F|7|U|8|@]|9|@$I|V|J|W|1|X]]|A|$]]|$1|K|3|-4|5|F|7|Y|8|@]|9|@]|A|$]]]|L|$M|$5|N|O|P|A|$Q|R]]]]

<pre><code>$(document).ready(function () {
$('#menu ul li a').click(function (ev) {
    $('#menu ul li').removeClass('selected');
    $(ev.currentTarget).parent('li').addClass('selected');
});
</code></pre>

<p>});</p>

<p><a href="https://jsfiddle.net/taditdash/LrMsA/" rel="nofollow">enter link description here</a></p>


blocks|key|4404386|text|如果我理解正确的话，你的CSS是错误的。以下是我提出的解决方案：|type|unstyled|depth|inlineStyleRanges|entityRanges|data|4404387|.tabs:active
{
background-color:+black;
}|code-block|syntax|javascript|4404388|entityMap^0|0|0^^$0|@$1|2|3|4|5|6|7|I|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|J|8|@]|9|@]|A|$E|F]]|$1|G|3|-4|5|6|7|K|8|@]|9|@]|A|$]]]|H|$]]

<p>Your CSS is wrong if I understood you correctlly. Here is my proposed sollution:</p>

<pre><code>.tabs:active
{
background-color: black;
}
</code></pre>


blocks|key|4404425|text|您可以简单地在Tabindex中使用:focus伪类。|type|unstyled|depth|inlineStyleRanges|offset|length|style|CODE|entityRanges|data|4404426|但是如果你关注任何其他东西，那么标签的背景样式将会丢失:(|4404427|​|4404428|.tabs>a>p:focus{+
++background-color:gray+!important;
++display:inline-block;
++color:#000;
}|code-block|syntax|javascript|4404429|<link+href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css"+rel="stylesheet"/>
<div+class="col-md-2+tabs"+>
++++<a+href="#">
++++++++<p+tabindex="1">+First+</p>
++++</a>
</div>
<div+class="col-md-2+tabs"+>
++++<a+href="#">
++++++++<p+tabindex="2">+Second+</p>
++++</a>
</div>
<div+class="col-md-2+tabs"+>
++++<a+href="#">
++++++++<p+tabindex="3">+Third+</p>
++++</a>
</div>|4404430|4404431|entityMap^0|7|8|I|6|0|0|0|0|0|0^^$0|@$1|2|3|4|5|6|7|T|8|@$9|U|A|V|B|C]|$9|W|A|X|B|C]]|D|@]|E|$]]|$1|F|3|G|5|6|7|Y|8|@]|D|@]|E|$]]|$1|H|3|I|5|6|7|Z|8|@]|D|@]|E|$]]|$1|J|3|K|5|L|7|10|8|@]|D|@]|E|$M|N]]|$1|O|3|P|5|L|7|11|8|@]|D|@]|E|$M|N]]|$1|Q|3|I|5|6|7|12|8|@]|D|@]|E|$]]|$1|R|3|-4|5|6|7|13|8|@]|D|@]|E|$]]]|S|$]]

<p>You can simply use <code>:focus</code> Pseudo class with <code>Tabindex</code>.</p>

<p>But if you focus any other things, then the background style of tabs will be lost :(</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-css lang-css prettyprint-override"><code>.tabs&gt;a&gt;p:focus{ 
  background-color:gray !important;
  display:inline-block;
  color:#000;
}</code></pre>
<pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet"/&gt;
&lt;div class="col-md-2 tabs" &gt;
    &lt;a href="#"&gt;
        &lt;p tabindex="1"&gt; First &lt;/p&gt;
    &lt;/a&gt;
&lt;/div&gt;
&lt;div class="col-md-2 tabs" &gt;
    &lt;a href="#"&gt;
        &lt;p tabindex="2"&gt; Second &lt;/p&gt;
    &lt;/a&gt;
&lt;/div&gt;
&lt;div class="col-md-2 tabs" &gt;
    &lt;a href="#"&gt;
        &lt;p tabindex="3"&gt; Third &lt;/p&gt;
    &lt;/a&gt;
&lt;/div&gt;</code></pre>
</div>
</div>
</p>


blocks|key|4404567|text|​|type|unstyled|depth|inlineStyleRanges|entityRanges|data|4404568|$(".tabs").on("click",+function(e){
++e.preventDefault();
++$(".tabs.active").removeClass("active");
++$(this).addClass("active");
});//

$(".tabs").eq(0).trigger("click");|code-block|syntax|javascript|4404569|.tabs.active+a
{
++display:+block;
++background:+black;
++color:+#fff;
}|4404570|<script+src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js"></script>
<div+class="col-md-2+tabs">
++++<a+href="#">
++++++++<p>+First+</p>
++++</a>
</div>
<div+class="col-md-2+tabs">
++++<a+href="#">
++++++++<p>+Second+</p>
++++</a>
</div>
<div+class="col-md-2+tabs">
++++<a+href="#">
++++++++<p>+Third+</p>
++++</a>
</div>|4404571|4404572|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>$(".tabs").on("click", function(e){
  e.preventDefault();
  $(".tabs.active").removeClass("active");
  $(this).addClass("active");
});//

$(".tabs").eq(0).trigger("click");</code></pre>
<pre class="snippet-code-css lang-css prettyprint-override"><code>.tabs.active a
{
  display: block;
  background: black;
  color: #fff;
}</code></pre>
<pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js"&gt;&lt;/script&gt;
&lt;div class="col-md-2 tabs"&gt;
    &lt;a href="#"&gt;
        &lt;p&gt; First &lt;/p&gt;
    &lt;/a&gt;
&lt;/div&gt;
&lt;div class="col-md-2 tabs"&gt;
    &lt;a href="#"&gt;
        &lt;p&gt; Second &lt;/p&gt;
    &lt;/a&gt;
&lt;/div&gt;
&lt;div class="col-md-2 tabs"&gt;
    &lt;a href="#"&gt;
        &lt;p&gt; Third &lt;/p&gt;
    &lt;/a&gt;
&lt;/div&gt;</code></pre>
</div>
</div>
</p>


blocks|key|4404513|text|从你的问题中不清楚是希望每个div单独改变颜色，还是只想突出显示其中一个div。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|4404514|如果您希望一次只选择一个div，那么可以使用@Magnus+Buvarp解决方案，但不要使用复选框，而要使用具有相同名称的单选按钮。|4404515|​|4404516|div+{
++width:+100px;
++height:+50px;
++padding:+4px;
++background-color:+#eee;
++border:+2px+solid+gray;
}
input[type="radio"]+{+/*+changed+to+"radio"+*/
++display:+none;
}
input[type="radio"]+%2B+label+{+/*+changed+to+"radio"+*/
++display:+table;
++margin:+20px;
}
input[type="radio"]:checked+%2B+label+div+{+/*+changed+to+"radio"+*/
++background-color:+yellow;
}|code-block|syntax|javascript|4404517|<strong>There+can+be+only+one!</strong>


<input+type="radio"+name="group1"+id="rb1">
<label+for="rb1">
++<div>
++++Click+Me!
++</div>
</label>



<input+type="radio"+name="group1"+id="rb2">
<label+for="rb2">
++<div>
++++No!+Click+Me!
++</div>
</label>|4404518|4404519|您现在可以看到，当您单击其中一个时，另一个将变为未选中状态。|4404520|这里的权衡是，一旦选择了其中一个，就必须始终选择两个中的一个。这是不是正确的方法取决于你的需要。|4404521|附言:稍微调整了一下颜色，别问我为什么，我不知道:)|4404522|entityMap^0|0|0|0|0|0|0|0|0|0^^$0|@$1|2|3|4|5|6|7|V|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|W|8|@]|9|@]|A|$]]|$1|D|3|E|5|6|7|X|8|@]|9|@]|A|$]]|$1|F|3|G|5|H|7|Y|8|@]|9|@]|A|$I|J]]|$1|K|3|L|5|H|7|Z|8|@]|9|@]|A|$I|J]]|$1|M|3|E|5|6|7|10|8|@]|9|@]|A|$]]|$1|N|3|O|5|6|7|11|8|@]|9|@]|A|$]]|$1|P|3|Q|5|6|7|12|8|@]|9|@]|A|$]]|$1|R|3|S|5|6|7|13|8|@]|9|@]|A|$]]|$1|T|3|-4|5|6|7|14|8|@]|9|@]|A|$]]]|U|$]]

<p>It wasn't clear from your question whether you wanted each of the divs to change colors independently or whether you wanted only one of the div's to be highlighted.</p>

<p>If you only want one of the divs to be selected at a time use you can use @Magnus Buvarp solution but instead of using checkboxes use radio buttons that share the same name.</p>

<p><div class="snippet" data-lang="js" data-hide="false" data-console="false" data-babel="false">
<div class="snippet-code">
<pre class="snippet-code-css lang-css prettyprint-override"><code>div {
  width: 100px;
  height: 50px;
  padding: 4px;
  background-color: #eee;
  border: 2px solid gray;
}
input[type="radio"] { /* changed to "radio" */
  display: none;
}
input[type="radio"] + label { /* changed to "radio" */
  display: table;
  margin: 20px;
}
input[type="radio"]:checked + label div { /* changed to "radio" */
  background-color: yellow;
}</code></pre>
<pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;strong&gt;There can be only one!&lt;/strong&gt;

&lt;!-- changed to "radio" and added "name" attribute --&gt;
&lt;input type="radio" name="group1" id="rb1"&gt;
&lt;label for="rb1"&gt;
  &lt;div&gt;
    Click Me!
  &lt;/div&gt;
&lt;/label&gt;

&lt;!-- changed to "radio" and added "name" attribute --&gt;
&lt;!-- notice the same for both radio buttons is the same --&gt;
&lt;input type="radio" name="group1" id="rb2"&gt;
&lt;label for="rb2"&gt;
  &lt;div&gt;
    No! Click Me!
  &lt;/div&gt;
&lt;/label&gt;</code></pre>
</div>
</div>
</p>

<p>You can see now that when you click on one of them the other becomes unselected.</p>

<p>The trade off here is that once you select one, one of the two always has to be selected. Whether this is the right way to go depends on your needs.</p>

<p>P.S. Tweaked the colors a little bit, don't ask me why, I don't know :)</p>


<p>I have a few div and when a user clicks on any one of them i wish to change its background color, and i also want that for the first time by default the first div should be active with the colored background</p>

<p>Code that i am using is</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-css lang-css prettyprint-override"><code>.tabs.active a {
  background: black;
}</code></pre>
<pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;div class="col-md-2 tabs"&gt;
  &lt;a href="#"&gt;
    &lt;p&gt;First&lt;/p&gt;
  &lt;/a&gt;
&lt;/div&gt;
&lt;div class="col-md-2 tabs"&gt;
  &lt;a href="#"&gt;
    &lt;p&gt;Second&lt;/p&gt;
  &lt;/a&gt;
&lt;/div&gt;
&lt;div class="col-md-2 tabs"&gt;
  &lt;a href="#"&gt;
    &lt;p&gt;Third&lt;/p&gt;
  &lt;/a&gt;
&lt;/div&gt;</code></pre>
</div>
</div>
</p>

<p>but the color is not changing. can anyone please tell me where the code has gone wrong</p>


Change the color of div when user clicks over it

我有几个div，当用户单击其中任何一个时，我希望更改其背景颜色，并且我还希望第一次默认情况下，第一个div应该是活动的彩色背景我使用的代码是​.tabs.active a {  background: black;}<div class="col-md-2 tabs">  <a href="#">    <p>Firs...

问当用户单击div时，更改div的颜色
EN

社区

活动

资源

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问当用户单击div时，更改div的颜色EN

社区

活动

资源

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问当用户单击div时，更改div的颜色
EN