Добавить класс для <LI> на предыдущий и следующий клик
Как добавить класс для тега li списка одновременно при нажатии на кнопку "Далее" и "Предыдущая".
по щелчку вперед и назад активный класс должен одновременно добавлять и удалять для li.
Кто-нибудь может решить эту проблему.
Заранее спасибо:)
$(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>
3 ответа
Посмотрите на это JsFiddle
То, что вы должны сделать, это, вы должны добавить те же имена классов для соответствующих li
, На next()
или же previous()
щелкните, получите класс видимого элемента div и используйте его, чтобы активировать list li
,
Надеюсь, поможет.
Вы можете попробовать следующими способами:
.next().addClass('your-class')
а также .prev().addClass('your-class')
Надеюсь, это поможет вам....
active
класс будет применяться к <li>
теги, если вы нажмете следующую кнопку сейчас. И если вы хотите, чтобы perv
Кнопка сделать то же самое должна изменить ваш код на это:
$("#prev").click(function(){
$(".list li").addClass("active");
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;
});
Если я правильно понял, это должно сработать.