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

hwamh0ep 于 2022-11-19 发布在其他

关注(0)|答案(3)|浏览(118)

我正在创建一个消息收件箱，并希望在选定消息时更改选定消息的颜色。我已经完成了此操作，但我不确定如何在选定另一个消息时将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>

css

来源：https://stackoverflow.com/questions/16652523/how-to-change-the-css-on-the-last-clicked-div

3条答案

按热度按时间

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/

赞(0）回复(0）举报 2022-11-19

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;
}

赞(0）回复(0）举报 2022-11-19

dy2hfwbg3#

也可以这样做：

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

赞(0）回复(0）举报 2022-11-19

我来回答

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

3条答案

相关问题

热门标签

最新问答