在 CSS 和 Jquery 中将颜色更改回默认值 [重复]

Posted 2023-02-22

【中文标题】在 CSS 和 Jquery 中将颜色更改回默认值 [重复]

【英文标题】：Changing color back to default in CSS and Jquery [duplicate]

【发布时间】：2016-11-03 11:04:14

【问题描述】：

在我的代码中，我有 10 个不同的列表项，我想以红色显示当前单击的项目，就好像当前项目更改了颜色应该恢复为默认颜色一样。有什么办法吗？？

$(this).css("color","red");

我在“点击”事件中使用它来更改当前元素的颜色。

【问题讨论】：

为什么不使用.addClass('red') where .redcolor:red ？

Repeated question.

【参考方案1】：

我想以红色显示当前单击的项目，就好像 当前项目更改颜色应恢复为默认颜色

你可以使用<a>元素、:target、相邻兄弟+选择器、cssanimation。 f 要求是设置color 直到单击兄弟li 元素，删除animation，在选择器处设置color

a 
  text-decoration: none;
  color: inherit;
  cursor: default;
  display: block;
  position: relative;
  top: 18px;
  width: 100px;
  height: 18px;

a + div 
  font-size: 18px;

:target + div 
  animation: togglecolor 5s linear 0s forwards;

@keyframes togglecolor 
  from 
    color: red;
  
  to 
    color: initial;
  

<ul>
  <li>
    <a id="1" href="#1"></a>
    <div>link 1</div>
  </li>
  <li>
    <a id="2" href="#2"></a>
    <div>link 2</div>
  </li>
  <li>
    <a id="3" href="#3"></a>
    <div>link 3</div>
  </li>
  <li>
    <a id="4" href="#4"></a>
    <div>link 4</div>
  </li>
  <li>
    <a id="5" href="#5"></a>
    <div>link 5</div>
  </li>
  <li>
    <a id="6" href="#6"></a>
    <div>link 6</div>
  </li>
  <li>
    <a id="7" href="#7"></a>
    <div>link 7</div>
  </li>
  <li>
    <a id="8" href="#8"></a>
    <div>link 8</div>
  </li>
  <li>
    <a id="9" href="#9"></a>
    <div>link 9</div>
  </li>
  <li>
    <a id="10" href="#10"></a>
    <div>link 10</div>
  </li>
</ul>

【参考方案2】：

在应用css之前重置所有其他li元素

$('li').on('click', function() 
  $('li').css('color', '');//WIll remove `color` css from all `li` elements
  $(this).css('color', 'red');//Will apply `red` to current element
);

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<ul>
  <li>Coffee</li>
  <li>Tea</li>
  <li>Milk</li>
</ul>

注意：按照其他人的建议，玩class是更好的习惯

$('li').on('click', function() 
  $('li.red').removeClass('red');//Will remove `red` class from `li Element` having class as `red`
  $(this).addClass('red');//Add class to clicked element
);

.red 
  color: red;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<ul>
  <li>Coffee</li>
  <li>Tea</li>
  <li>Milk</li>
</ul>

【参考方案3】：

使用 Jquery toggleClass

<a class="default" onclick="changeColor(this)">default</div>


function changeColor(cntrl)

$(cntrl).toggleClass ("red");


.default



.red

【参考方案4】：

你可以这样做：

$(this).css("color", "");

...但不是使用直接样式，一般我建议使用 class 并在您希望应用这些样式时添加它（addClass），然后删除它（@987654323 @) 当您希望删除它们时。 toggleClass 也很方便。

两者的例子：

var direct = false;
var usingClass = false;
$("#direct").on("click", function() 
  direct = !direct;
  if (direct) 
    $(this).css("color", "red");
   else 
    $(this).css("color", "");
  
  return false;
);
$("#using-class").on("click", function() 
  usingClass = !usingClass;
  $(this).toggleClass("the-class", usingClass);
  return false;
);

.the-class 
  color: red;

<p>Click to toggle.</p>
<p id="direct">Direct</p>
<p id="using-class">Using class</p>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>

【参考方案5】：

$(this).css("color","red");

在此之前将所有元素的颜色设置为默认值，例如 如果项目列表具有类名 myclass 你可以设置

 $(".myclass").css("color","red");