如何更改上次单击的div上的CSS

hwamh0ep  于 2022-11-19  发布在  其他
关注(0)|答案(3)|浏览(117)

我正在创建一个消息收件箱,并希望在选定消息时更改选定消息的颜色。我已经完成了此操作,但我不确定如何在选定另一个消息时将div设置回原来的颜色。这是我目前所做的,但每个消息都将获得选定的类。

<script>
function getmessage(str)  {    
$('#mb'+str).removeClass('Message-Background');
    $('#mb'+str).addClass('Message-Background-Selected');
     // alert('#mb'+str);
//   var lastmb = $('#mb'+str);
     $('#mt'+str).removeClass('Message-Title');
    $('#mt'+str).addClass('Message-Title-Selected');
    //var lastmr = $('#mt'+str);
    $('#mprev'+str).removeClass('Message-Text');
    $('#mprev'+str).addClass('Message-Text-Selected'); 
}
</script>

<div id="mb1" class="Message-Background" style="border-left:#000 solid 4px;">
<div id="mt1" class="Message-Title" onclick="getmessage(this.id)" style="float:left;">
Title 1
</div>
<div id="mprev1" class="Message-Text" style="float:left;">
Message 1
</div>
</div>
<div id="mb2" class="Message-Background" style="border-left:#000 solid 4px;">
<div id="mt2" class="Message-Title" onclick="getmessage(this.id)" style="float:left;">
Title 2
</div>
<div id="mprev2" class="Message-Text" style="float:left;">
Message 2
</div>
</div>
<div id="mb3" class="Message-Background" style="border-left:#000 solid 4px;">
<div id="mt3" class="Message-Title" onclick="getmessage(this.id)" style="float:left;">
Title 3
</div>
<div id="mprev3" class="Message-Text" style="float:left;">
Message 3
</div>
</div>
3z6pesqy

3z6pesqy1#

只需做一个函数:

$("div").click(function() {
      $("div").removeClass('Message-Text-Selected');
      $(this).addClass('Message-Text-Selected'); 
  });

您也可以使用toggleClass
http://api.jquery.com/toggleClass/

JSF空闲时间:

http://jsfiddle.net/hwgTr/

wbgh16ku

wbgh16ku2#

因为你想改变多个元素,我会在“.message-background”上设置单击,并在那里切换一个类,影响其中的所有css。
Javascript语言:

$(".message-background").click(function() {
    $(".message-background").removeClass('Message-Background-Selected');
    $(this).addClass('Message-Background-Selected');
});

现在message-background中的元素可以继承它的选中状态。CSS:

.Message-Background-Selected {
    border:1px solid red;
}
.Message-Background-Selected .Message-Title {
    color:red;
}
.Message-Background-Selected .Message-Text {
    color:red;
}
dy2hfwbg

dy2hfwbg3#

也可以这样做:

$("div").click(function() {
      $(this).addClass('message-selected').siblings().removeClass('message-selected'); 
  });

相关问题