rockey dsouza rockey dsouza - 2 years ago 71
CSS Question

Add Class for <LI> on prev and next click

How to add class for list li tag simultaneously when click on next and prev button.

on click of next and prev the active class should add and remove simultaneously for li.

Can anybody solve this issue.

Thanks in advance :)



$(document).ready(function(){
$(".divs div").each(function(e) {
if (e != 0)
$(this).hide();

});

$("#next").click(function(){
$(".list li").addClass("active");
if ($(".divs div:visible").next().length != 0)
$(".divs div:visible").next().show().prev().hide();
else {
$(".divs div:visible").hide();
$(".divs div:first").show();
}
return false;
});

$("#prev").click(function(){

if ($(".divs div:visible").prev().length != 0)
$(".divs div:visible").prev().show().next().hide();
else {
$(".divs div:visible").hide();
$(".divs div:last").show();
}
return false;
});
});

.active{color:red;}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="divs">
<div class="cls1">1</div>
<div class="cls2">2</div>
<div class="cls3">3</div>
<div class="cls4">4</div>
<div class="cls5">5</div>
<div class="cls6">6</div>
<div class="cls7">7</div>
</div>
<ul class="list">
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
</ul>

<a id="next">next</a>
<a id="prev">prev</a>




Answer Source

Take a look at this JsFiddle

What you are suppose to do is, you are suppose to add same class names for the corresponding li. On next() or previous() click, get the visible div's class and make use of it to set active on the list li.

Hope it helps.

Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download