如果特定模式处于打开状态，如何更改css
如果特定模式处于打开状态，如何更改css
提问于 2018-07-23 06:40:33
我在一个网站上工作，该网站有几种不同的模态，可以在查看其他模态时访问。例如，你点击一个按钮，它会打开一个模式，然后在查看该模式时，你还可以选择单击一个按钮，然后查看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函数，但似乎不能让它工作。
回答 1
Stack Overflow用户
回答已采纳
发布于 2018-07-23 07:21:19
在show.bs.modal事件上，您可以检索当前打开的模式的id ...
假设您希望更改触发所有模态中的和的元素上的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属性中使用"target id“)。
因此，您可以使用attribute selector来定位打开特定模式的链接。
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/51469820
复制相关文章
相似问题