У меня 2 modal элементов.В обоих у меня есть этот маленький элемент стилевого оформления : https://jsfiddle.net/EricTalv/wjmfe799/10/ Имея только один из них на одной странице , он работает отлично .
Проблема возникает, когда я пытаюсь добавить их к своим модалам: https://jsfiddle.net/EricTalv/x5qwnv82/1/
Итак, когда у меня уже естькласс .active в DOM первый модальный работает хорошо, однако , второй вообще не работает, и после того, как я оставляю первый модальный и возвращаюсь, ранеекажется, что выбранный элемент остается там, что является хорошим дополнением, но я чувствую, что это также вызывает проблемы.
Что я хочу сделать - это добавить .active класс только , когда нажимается один из этих элементов, и после выхода последний выбранный элемент должен оставаться.
Я пытался эту скрипку: http://jsfiddle.net/chipChocolate/pb95kv32/ эта концепция могла быработать, но не может заставить его работать, но также затрудняет чтение, так что было бы лучше более эффективное решение.
HTML:
<!-- The Modal 1-->
<div class="modal" id="modal1">
<div class="modal-dialog">
<div class="modal-content">
<!-- Modal Header -->
<div class="modal-header">
<h4 class="modal-title">Modal Heading 11111</h4>
<button type="button" class="close" data-dismiss="modal">×</button>
</div>
<div id="list-area">
<ul id="list-items-container">
<li class="item">item1</li>
<li class="item">item2</li>
</ul>
</div>
<!-- Modal footer -->
<div class="modal-footer">
<button type="button" class="btn btn-danger" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
<!-- The Modal 2-->
<div class="modal" id="modal2">
<div class="modal-dialog">
<div class="modal-content">
<!-- Modal Header -->
<div class="modal-header">
<h4 class="modal-title">Modal Heading 22222</h4>
<button type="button" class="close" data-dismiss="modal">×</button>
</div>
<div id="list-area">
<ul id="list-items-container">
<li class="item active">other1</li>
<li class="item">other2</li>
</ul>
</div>
<!-- Modal footer -->
<div class="modal-footer">
<button type="button" class="btn btn-danger" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
JS:
var header = document.getElementById("list-items-container");
var btns = header.getElementsByClassName("item");
for (var i = 0; i < btns.length; i++) {
btns[i].addEventListener("click", function() {
var current = document.getElementsByClassName("active");
current[0].className = current[0].className.replace(" active", "");
this.className += " active";
});
}
CSS:
body {
padding: 10px;
}
/* the list area */
#list-area {
background-color: #FC600A;
border: 2px solid #000;
display: inline-flex;
width: 50%;
}
#list-items-container {
padding: 0;
width: 100%;
}
#list-items-container li {
list-style: none;
font-size: 35px;
font-family: Corbel;
color: #1489B8;
padding: 0 10px 0 10px;
width: 100%;
transition: all .5s ease;
}
#list-items-container li:nth-child(odd) {
background-color: #F7E0D4;
}
#list-items-container li:hover,
#list-items-container .active {
color: red;
cursor: pointer;
padding-left: 50px;
}