次へ進むボタンを押すと、ページ遷移しないで次の要素を表示させたい

Question

次へ進むボタン（.content_btn）を押下すると、
steps__list-active が次のliに進み、
content-activeが次のcontentに進むjQueryを書きたいです。
contetはデフォルト非表示になっていて、content-activeのみ表示をさせたいです。
forで回してみようと思いましたが、eqに変数を指定すると動きません。。
どう直せば動くでしょうか。

【html】

<ul class="steps"> <li class="steps_list steps_list-active">1</li> <li class="steps_list">2</li> <li class="steps_list">3</li> <li class="steps_list">4</li> <li class="steps_list”>5</li> </ul> <div class=“content content—active”> <div class=“content_item">テキストテキストテキスト</div> <p class="content_btn00"> <span>次へ進む</span> </p> </div> <div class=“content”> <div class=“content_item">テキストテキストテキスト</div> <p class="content_btn01"> <span>次へ進む</span> </p> </div> <div class=“content”> <div class=“content_item">テキストテキストテキスト</div> <p class="content_btn02"> <span>次へ進む</span> </p> </div> <div class=“content”> <div class=“content_item">テキストテキストテキスト</div> <p class="content_btn03"> <span>次へ進む</span> </p> </div> <div class=“content”> <div class=“content_item">テキストテキストテキスト</div> <p class="content_btn04"> <span>次へ進む</span> </p> </div>

【css】
.steps_list {
background: #eee;
color: #333;
}
.steps_list {
background: #333;
color: #fff;
}
.content {
diaplay: none;
}
.content—active {
display: block;
}

【jQuery】
$(function() {
for( var i = 0; i < $('.steps_list').length; i++){
$(‘.content_btn0' + i).on('click', function(){
$('.steps_list').eq(i).removeClass('steps_list-active');
$(''.steps_list').eq(i + 1).addClass('steps_list-active’);
$('.content').eq(i).removeClass('content—active');
$('.content').eq(i + 1).addClass('content—active');
});
}
});

Comments

[Lhankor_Mhy]

「次のliに進み」とは具体的にはどういう動作ですか？　スクロールですか？

Answer 1

こんな感じです。ボタンのクラス名を一旦 .content_btn に統一しています。

<ul class="steps">
  <li class="steps_list steps_list-active">1</li>
  <li class="steps_list">2</li>
  <li class="steps_list">3</li>
  <li class="steps_list">4</li>
  <li class="steps_list">5</li>
</ul>
<div class="content content-active">
  <div class="content_item">テキスト1テキストテキスト</div>
  <p class="content_btn">
    <span>次へ進む</span>
  </p>
</div>
<div class="content">
  <div class="content_item">テキスト2テキストテキスト</div>
  <p class="content_btn">
    <span>次へ進む</span>
  </p>
</div>
<div class="content">
  <div class="content_item">テキスト3テキストテキスト</div>
  <p class="content_btn">
    <span>次へ進む</span>
  </p>
</div>
<div class="content">
  <div class="content_item">テキスト4テキストテキスト</div>
  <p class="content_btn">
    <span>次へ進む</span>
  </p>
</div>
<div class="content">
  <div class="content_item">テキスト5テキストテキスト</div>
  <p class="content_btn">
    <span>次へ進む</span>
  </p>
</div>

var $nextBtn = $('.content_btn'),
  $content = $('.content');

var activateNext = function(btn) {
  var $btn = $(btn),
    $currentContent = $btn.closest('.content'),
    nextIndex = $content.index($currentContent) + 1,
    $nextContent = $content.eq(nextIndex);

  if ($nextContent.length > 0) {
    $currentContent.removeClass('content-active');
    $nextContent.addClass('content-active');
  }
};

$nextBtn.on('click', function() {
  activateNext(this);
});

Comments

[退会済みユーザー]

動きました！！！ありがとうございました。