如果特定模式已打开，如何更改CSS

Question

我正在一个具有多个不同模态的网站上工作，可以在查看其他模态时访问它们。例如，您单击一个按钮会打开一个模态，然后在查看该模态时，您还可以选择单击一个按钮并查看其他9个模态。

我想做的是检测可见的模态，然后使该模态的按钮看起来与其余模态不同（下划线和粗体）。与导航类似，如果您在主页上，则导航栏中的主页选项卡会突出显示。

这是我正在使用的模态的代码。编辑：第一组按钮的代码与底部两组按钮的代码略有不同，我在改变周围的事物以尝试使其工作。我的原始代码位于最下面的两组按钮。

<div id="Building-Meisterhaus-Sud" style="float: left; margin:10px;  padding: 5px; text-align: center;">
  <h5 style="font-weight: bold"> Meisterhaus Nord </h5>

  <a data-backdrop="static" data-keyboard="false" style="cursor: default;" data-toggle="modal" href="#floor-modal-898" data-target=""  data-dismiss="modal" role="tab" aria-label="Close"> EG </a>                                  
  <a data-backdrop="static" data-keyboard="false" style="cursor: default;" data-toggle="modal" data-target="#floor-modal-918"  data-dismiss="modal" role="tab" aria-label="Close">  1. OG </a>                                               
  <a data-backdrop="static" data-keyboard="false" style="cursor: default;" data-toggle="modal" data-target="#floor-modal-920"  data-dismiss="modal" role="tab" aria-label="Close"> 2. OG </a>

</div>


<div id="Building-Meisterhaus-Sud" style=" float: left; margin: 10px;  padding: 5px; text-align: center;">
  <h5 style="font-weight: bold"> Meisterhaus Mitte </h5>
  <a type="button" data-backdrop="static" data-keyboard="false" style="cursor: default;" data-toggle="modal" data-target="#floor-modal-921" data-dismiss="modal" > EG </a> |
  <a type="button" data-backdrop="static" data-keyboard="false" style="cursor: default;" data-toggle="modal" data-target="#floor-modal-922"  data-dismiss="modal" >  1. OG </a> |
  <a type="button" data-backdrop="static" data-keyboard="false" style="cursor: default;" data-toggle="modal" data-target="#floor-modal-923" data-dismiss="modal" > 2. OG </a>

</div>

<div id="Building-Meisterhaus-Sud" style="float: left; margin: 10px; padding: 5px; text-align: center;">
  <h5 style="font-weight: bold"> Meisterhaus Sud </h5>
  <a type="button" data-backdrop="static" data-keyboard="false" style="cursor: default;"  data-dismiss="modal" data-toggle="modal" data-target="#floor-modal-924" aria-label="Close"> EG </a> |
  <a type="button" data-backdrop="static" data-keyboard="false" style="cursor: default;" data-dismiss="modal" data-toggle="modal" data-target="#floor-modal-925" aria-label="Close"> 1. OG </a> |
  <a type="button" data-backdrop="static" data-keyboard="false" style="cursor: default;" data-dismiss="modal" data-toggle="modal" data-target="#floor-modal-926" aria-label="Close"> 2. OG </a>

</div>

如果您在下面的图片中注意到Impressionen如何加粗和加下划线，因为它当前处于“活动状态”，我希望它上方的9个按钮具有相同的效果，这些按钮显示不同的模式。我已经尝试过jQuery函数，但似乎无法使其正常工作。

Answer 1

在show.bs.modal事件中，您可以检索当前打开的模式的ID ...

假设您希望更改触发模式打开的元素上的CSS， 和所有模式中的CSS一样，

$(document).on("show.bs.modal",function(e){
  var modal_id = e.target.id;
  console.log("Modal actually opened: "+modal_id);
  $("[data-target]").removeClass("boldUnderlined");
  $("[data-target='#"+modal_id+"']").addClass("boldUnderlined");
});

«我正在尝试检测可见的模态» ...现在您知道了，您可以获取其任何属性值（例如id），然后将其定位到其他任何元素（如模式打开链接，该链接在data-target属性中使用“目标ID”）。

因此，您可以使用attribute selector定位打开特定模式的链接。