Доброе время суток, есть вопрос оп jQuery, не как не могу отладить. Суть вопроса: Сеть html код и jQuery, не могу сделать так чтобы в каждом шаге при выборе input присваивался класс .active т.е в каждом из шагов можно было выбрать элемент, сейчас выбирается только 1 из всех шагов
$(document).ready(function() {
$("input[type='radio']").click(function() {
if ($('input:not(:checked)')) {
$('div.sweet-block').removeClass('active');
$('div.music-block').removeClass('active');
// $('.tab-pane').removeClass('animated bounce');
}
if ($('input').is(':checked')) {
$(this).parent('.sweet-block').addClass('active');
$(this).parent('.music-block').addClass('active');
// $(this).parent('ul.wiz-cat').addClass('active');
$('.tab-pane').addClass('animated bounceInLeft');
}
});
});
.wiz-cat {
padding-left: 0px;
text-align: center;
display: block;
margin: 30px auto;
}
.wiz-cat li {
list-style: none;
display: inline-block;
width: 28%;
vertical-align: top;
}
.sweet-block:hover,
.sweet-block.active,
.music-block:hover,
.music-block.active {
background: rgba(255, 255, 255, 0.7) none repeat scroll 0 0;
box-shadow: 0 1px 6px 0 rgba(0, 0, 0, 0.12), 0 1px 6px 0 rgba(0, 0, 0, 0.12);
}
.music-block,
.sweet-block {
position: relative;
padding: 35px 20px;
transition: all 0.4s ease 0s;
}
div.music-block div.wiz-cat-block h3,
div.sweet-block div.wiz-cat-block h3 {
color: #777;
margin: 20px 0px 5px 0px;
transition: all 0.4s ease 0s;
}
div.music-block:hover div.wiz-cat-block h3,
div.music-block.active div.wiz-cat-block h3,
div.sweet-block:hover div.wiz-cat-block h3,
div.sweet-block.active div.wiz-cat-block h3 {
color: #ca2028;
}
div.wizard form div.tab-content.add-share div.tab-pane h3 {
text-transform: uppercase;
margin-bottom: 10px;
}
div.wizard form div.tab-content.add-share div.tab-pane h5 {
font-family: "Open Sans Condensed", sans-serif;
color: #5b5b5b;
font-size: 16px;
font-weight: normal;
margin-bottom: 20px;
opacity: 0.8;
text-transform: uppercase;
}
div.music-block div.wiz-cat-block span.desc,
div.sweet-block div.wiz-cat-block span.desc {
color: #777;
}
div.music-block:hover div.wiz-cat-block div.img,
div.music-block.active div.wiz-cat-block div.img,
div.sweet-block:hover div.wiz-cat-block div.img,
div.sweet-block.active div.wiz-cat-block div.img {
border-color: #ca2028;
}
.music-block input,
.sweet-block input {
position: absolute;
width: 100%;
height: 100%;
opacity: 0;
left: 0;
top: 0;
z-index: 10;
cursor: pointer;
}
.wiz-cat-block {} .wiz-cat-block .img {
border: 5px solid #eee;
border-radius: 3px;
box-shadow: 0 1px 6px 0 rgba(0, 0, 0, 0.12), 0 1px 6px 0 rgba(0, 0, 0, 0.12);
height: 130px;
margin: 0 auto;
overflow: hidden;
text-align: center;
transition: all 0.4s ease 0s;
width: 130px;
}
.wiz-cat-block .img img {
width: 100%;
height: auto;
}
.wizard {
margin: 20px auto;
background: #fff;
overflow: hidden;
}
.wizard .nav-tabs {
position: relative;
margin: 40px auto;
margin-bottom: 0;
border-bottom-color: #e0e0e0;
}
.wizard > div.wizard-inner {
position: relative;
}
.connecting-line {
height: 2px;
background: #e0e0e0;
position: absolute;
width: 80%;
margin: 0 auto;
left: 0;
right: 0;
top: 50%;
z-index: 1;
}
.wizard .nav-tabs > li.active > a,
.wizard .nav-tabs > li.active > a:hover,
.wizard .nav-tabs > li.active > a:focus {
color: #555555;
cursor: default;
border: 0;
border-bottom-color: transparent;
}
span.round-tab {
width: 70px;
height: 70px;
line-height: 70px;
display: inline-block;
border-radius: 100px;
background: #fff;
border: 2px solid #e0e0e0;
z-index: 2;
position: absolute;
left: 0;
text-align: center;
font-size: 25px;
}
span.round-tab i {
color: #555555;
}
.wizard li.active span.round-tab {
background: #fff;
border: 2px solid #5bc0de;
}
.wizard li.active span.round-tab i {
color: #5bc0de;
}
span.round-tab:hover {
color: #333;
border: 2px solid #333;
}
.wizard .nav-tabs > li {
width: 25%;
}
.wizard li:after {
content: " ";
position: absolute;
left: 46%;
opacity: 0;
margin: 0 auto;
bottom: 0px;
border: 5px solid transparent;
border-bottom-color: #5bc0de;
transition: 0.1s ease-in-out;
}
.wizard li.active:after {
content: " ";
position: absolute;
left: 46%;
opacity: 1;
margin: 0 auto;
bottom: 0px;
border: 10px solid transparent;
border-bottom-color: #5bc0de;
}
.wizard .nav-tabs > li a {
width: 70px;
height: 70px;
margin: 20px auto;
border-radius: 100%;
padding: 0;
}
.wizard .nav-tabs > li a:hover {
background: transparent;
}
.wizard .tab-pane {
position: relative;
padding-top: 50px;
}
.wizard h3 {
margin-top: 0;
}
@media( max-width:585px) {
.wizard {
width: 90%;
height: auto !important;
}
span.round-tab {
font-size: 16px;
width: 50px;
height: 50px;
line-height: 50px;
}
.wizard .nav-tabs > li a {
width: 50px;
height: 50px;
line-height: 50px;
}
.wizard li.active:after {
content: " ";
position: absolute;
left: 35%;
}
}
.add-share {
text-align: center;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<form role="form">
<div class="tab-content add-share">
<div class="tab-pane active" role="tabpanel" id="step1">
<h3>Shoose Sweets</h3>
<h5>Please select the Sweets for the set</h5>
<ul class="wiz-cat">
<li class="next-step">
<div class="sweet-block active">
<input id="check_sweets1" name="sweets" type="radio">
<div class="wiz-cat-block">
<div class="img">
<img src="img/sweets/1.jpg" alt="">
</div>
<h3>Sweet 1</h3>
<span class="desc">Lorem ipsum dolor sit amet, consectetur adipisicing elit, recusandae tenetur blanditiis.</span>
</div>
</div>
</li>
<li class="next-step">
<div class="sweet-block">
<input id="check_sweets2" name="sweets" type="radio">
<div class="wiz-cat-block">
<div class="img">
<img src="img/sweets/2.jpg" alt="">
</div>
<h3>Sweet 2</h3>
<span class="desc">Lorem ipsum dolor sit amet, consectetur adipisicing elit, recusandae tenetur blanditiis.</span>
</div>
</div>
</li>
</ul>
</div>
<div class="tab-pane" role="tabpanel" id="step2">
<h3>Pleasant Mood with Music</h3>
<h5>Please select Music for the set</h5>
<ul class="wiz-cat">
<li class="next-step">
<div class="music-block">
<input id="check_music1" name="music" type="radio">
<div class="wiz-cat-block">
<div class="img">
<img src="img/music/jazz.jpg" alt="">
</div>
<h3>Jazz</h3>
<span class="desc">Lorem ipsum dolor sit amet, consectetur adipisicing elit, recusandae tenetur blanditiis.</span>
</div>
</div>
</li>
<li class="next-step">
<div class="music-block">
<input id="check_music2" name="music" type="radio">
<div class="wiz-cat-block">
<div class="img">
<img src="img/music/blues.jpg" alt="">
</div>
<h3>GARRETT Blues</h3>
<span class="desc">Lorem ipsum dolor sit amet, consectetur adipisicing elit, recusandae tenetur blanditiis.</span>
</div>
</div>
</li>
</ul>
</div>
</div>
</form>