Question

您好我立即将其作为示例。

<li id="1" class="menu select">Test</li>
<li id="2" class="menu select">Test</li>
<li id="3" class="menu active">Test</li>
<li id="4" class="menu">Test</li>
<li id="5" class="menu">Test</li>

有效将addclass添加到上一个类

的选择中

提前感谢您的帮助。

Answer 1

我认为以下链接可以帮助您理解您的问题。

<ul id="navlist">
   <li id="home"><a class="nav" href="home">Home</a></li>
   <li id="about"><a class="nav" href="about-us">About Us</a></li>
   <li id="test"><a class="nav" href="test">test page </a></li>
</ul>

$('#navlist a').click(function(e) {
   e.preventDefault(); //prevent the link from being followed
   $('#navlist a').removeClass('selected');
   $(this).addClass('selected');
   var $first = $('li:first', 'ul');
   var $last = $('li:last', 'ul');
   var $selected = $(".selected");
   $next = $selected.next('li').length ? $selected.next('li') : $first;
   console.log($first, 'last:- ',$last, 'next item:- ',$next)
});

// Css
.nav { color: green; }
.selected { color: red; }

https://jsfiddle.net/hnagarkoti/wo8wmwL1/

jQuery select ul li items with next prev buttons

Answer 2

＆＃13;

$(document).ready(function() {
  $("li.active").prevAll().addClass('active-prev');
  $("li.active").nextAll().addClass('active-next');
});

＆＃13;

.active {
  color: #f00;
}

.active-next {
  color: #0F0;
}

.active-prev {
  color: #00F;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<li id="1" class="menu select">Test</li>
<li id="2" class="menu select">Test</li>
<li id="3" class="menu active">Test</li>
<li id="4" class="menu">Test</li>
<li id="5" class="menu">Test</li>

＆＃13;

你需要这样的东西吗？

Jquery滚动多个制作li标签活跃

2 个答案: