Jqueryを使用した前後のナビゲーション

Question

リンクを進めたり、リンクのリストに戻ったりするために、前後のリンクを使ってナビゲーションコントロールを作っています。次へをクリックすると、リストの最初のページに進みますが、そこにとどまります。 訪問したリンクをアクティブに設定して、1から2、次に2から3などの順番に進む方法を教えてください。 ありがとうございました。

$(document).ready(function() { 
 
      $('.next-button').click(function() { 
 
       var $el = $('#nav li a.navSelected').removeClass('navSelected'); 
 
       var $next = $el.parent().next(); 
 
       if ($next.length == 0) $next = $('#nav li:first'); 
 
       $next.find('a.nav-button').addClass('navSelected'); 
 
       // Added window.location.href to follow the selected links href 
 
       window.location.href = $next.find('a.nav-button').attr('href'); 
 
      }); 
 
      $('.prev-button').click(function() { 
 
       var $el = $('#nav li a.navSelected').removeClass('navSelected'); 
 
       var $prev = $el.parent().prev(); 
 
       if ($prev.length == 0) $prev = $('#nav li:last'); 
 
       $prev.find('a.nav-button').addClass('navSelected'); 
 
       // Added window.location.href to follow the selected links href 
 
       window.location.href = $prev.find('a.nav-button').attr('href'); 
 
      }); 
 
     });

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<ul id="nav"> 
 
<li><a href="pagea.html"class="nav-button">A</a></li> 
 
<li><a href="pageb.html" class="nav-button">B</a></li> 
 
<li><a href="pagec.html" class="nav-button">C</a></li> 
 
<li><a href="paged.html"class="nav-button">D</a></li> 
 
<li><a href="pagef.html" class="nav-button">F</a></li> 
 
</ul> 
 
<div id="arrow-left" class="slide-right"><a href="#" class="prev-button" 
 
title="Previous"><img src="images/arrow-left.png" alt="Left Arrow" width="25" 
 
height="48"></a></div> 
 
<div id="arrow-right" class="slide-left"><a href="#" class="next-button" 
 
title="Next"><img src="images/arrow-right.png" alt="Right Arrow" width="25" 
 
height="48"></a></div>

答えは、このGithubの中スティーブンによって提供されています

https://github.com/Steven0213/Back_and_next_nav

Answer 1

私はあなたのためのthisフィドルを作成しました。 ブートストラップとJQueryを使用しています。 ブートストラップとJQueryが分かっていれば分かりません。 これ以上質問がある場合は、尋ねてください。

1

：

var ArrayOfPages = ['One', 'Two', 'Three', 'Four', 'Five']; 
 

 

 
var makeTheRightOneActiveWhenThePageStart = function() { 
 
    var url = window.location.href; 
 
    for (var i = 0; i < ArrayOfPages.length; i++){ 
 
     var newUrl = ArrayOfPages[i] + '.html'; 
 
     if (url.indexOf(newUrl) > 1){ 
 
      var newI = i + 1; 
 
      $("a:contains("+ newI + ")").parent().addClass('active'); 
 
     } } }; 
 

 
var makeTheRightOneActive = function() { var $selector = $(this); var getClass = $selector.attr('class'); var getHTML = $selector.html(); var whatTheSetTrue; switch (getClass){ 
 
     case 'prev': 
 
      whatTheSetTrue = getTheRightOneActiveWhenPressPrevOrNext('prev',getHTML); 
 
      break; 
 
     case 'next': 
 
      whatTheSetTrue = getTheRightOneActiveWhenPressPrevOrNext('next',getHTML); 
 
      break; 
 
     default: 
 
      whatTheSetTrue = getTheRightOneActiveWhenPressPrevOrNext('',getHTML); 
 
      break; } window.open(whatTheSetTrue + '.html', '_self', false) }; 
 

 
var getTheRightOneActiveWhenPressPrevOrNext = function (whatMethode,whichNumber) { 
 
    var whatPageAreYouOn = $('.active').children().html(); 
 
    var whatCurrentPlaceAreYouOn = findAtWhichPlaceYouAreInTheArray(whatPageAreYouOn); 
 
    var newPlace; 
 
    switch (whatMethode){ 
 
     case 'next': 
 
      newPlace = whatCurrentPlaceAreYouOn + 1; 
 
      if (newPlace === 5){ 
 
       newPlace = 4; 
 
      } 
 
      break; 
 
     case 'prev': 
 
      newPlace = whatCurrentPlaceAreYouOn - 1; 
 
      if (newPlace === -1){ 
 
       newPlace = 0; 
 
      } 
 
      break; 
 
     default: 
 
      newPlace = findAtWhichPlaceYouAreInTheArray(whichNumber); 
 
      break; 
 
    } 
 
    return ArrayOfPages[newPlace] }; 
 

 
var findAtWhichPlaceYouAreInTheArray = function (whatPageAreYouOn) { 
 
    whatPageAreYouOn = parseInt(whatPageAreYouOn); 
 
    return whatPageAreYouOn - 1; }; 
 

 
var init = function() { 
 
    makeTheRightOneActiveWhenThePageStart(); 
 
    $('.container .pagination a').on('click',makeTheRightOneActive); }; $(document).ready(init());

div.pageOne, div.pageTwo, div.pageThree, div.pageFour, div.pageFive{ 
 
    margin-top: 15px; 
 
} 
 

 
#nav{ 
 
    text-align: center; 
 
}

<script src="https://code.jquery.com/jquery-3.2.1.min.js"></script> 
 
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" /> 
 
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script> 
 
<script src="https://code.jquery.com/jquery-3.2.1.min.js"></script> 
 

 
<div class="container"> 
 
    <div class="pageOne"> 
 
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas imperdiet, risus a rutrum eleifend, nulla lorem laoreet dolor, ut vehicula quam magna et est. Pellentesque egestas sem et ligula tincidunt finibus. Nullam a efficitur mi, eget rutrum 
 
     dolor. Maecenas aliquet nibh quis vehicula gravida. Ut in finibus magna. Sed sagittis, velit ac cursus auctor, tortor dui mattis metus, sed commodo urna erat congue justo. Morbi porta nisi mattis lobortis aliquam. Phasellus nec nibh in ipsum scelerisque 
 
     dignissim. Morbi id diam ut purus rhoncus suscipit placerat at libero. Curabitur quis eros maximus, pharetra urna eget, facilisis ex. Etiam commodo orci aliquet odio fermentum pulvinar. Duis auctor pellentesque condimentum. Duis ut nisi sem. Nulla 
 
     in augue sed augue euismod feugiat in in nunc. Aliquam vel enim eros. Pellentesque leo dui, iaculis quis congue eu, ultrices id nisl.</p> 
 
    </div> 
 
    <div class="pageTwo"> 
 
    <p>Cras vehicula ipsum ac eros porta dapibus. In eu ante varius, porta lectus sit amet, sagittis ipsum. Mauris congue velit mauris, condimentum sollicitudin mi luctus quis. Aliquam erat volutpat. Praesent justo erat, facilisis id eleifend non, accumsan 
 
     vel arcu. Sed id dui malesuada, vulputate velit sit amet, porta orci. Nam eu nunc eu erat accumsan ornare. Vivamus dui lacus, pharetra a bibendum nec, molestie non justo. Praesent at quam urna. Integer pharetra suscipit arcu, in sodales turpis mollis 
 
     ut. Etiam placerat eget ante in congue.</p> 
 
    </div> 
 
    <div class="pageThree"> 
 
    <p>Donec pretium ex a dolor luctus, eu malesuada metus condimentum. Aliquam consequat vestibulum massa, id iaculis magna aliquet malesuada. Nunc interdum turpis vitae metus feugiat, fringilla faucibus libero egestas. Donec tincidunt luctus gravida. Maecenas 
 
     tincidunt interdum enim, vel consequat lacus auctor eu. Vestibulum metus lorem, posuere at gravida nec, lobortis vitae sapien. In auctor tempus pretium. Aliquam dictum urna ac aliquet imperdiet. Ut egestas eros et ante ornare, et pretium erat scelerisque. 
 
     Donec libero nunc, posuere vitae massa non, tempus lacinia nisi.</p> 
 
    </div> 
 
    <div class="pageFour"> 
 
    <p>Nunc a nisl vitae tortor consequat ultrices. Suspendisse tincidunt rutrum ipsum in dictum. Proin tempus mi quis sollicitudin aliquam. Maecenas scelerisque id lectus et fermentum. Morbi dictum elit eu nisi convallis sagittis. In hac habitasse platea 
 
     dictumst. In neque lectus, suscipit non quam sed, viverra viverra nisl. Donec at ex non velit vestibulum molestie a eget ex. In faucibus viverra purus, nec dapibus diam feugiat eu. Class aptent taciti sociosqu ad litora torquent per conubia nostra, 
 
     per inceptos himenaeos.</p> 
 
    </div> 
 
    <div class="pageFive"> 
 
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. In et commodo sapien. Vestibulum rutrum nec nibh ac aliquet. Vestibulum lacus felis, vulputate et pretium eu, posuere euismod sapien. Sed varius vel sapien non dapibus. Nullam metus lectus, 
 
     fringilla quis orci ac, iaculis consectetur ipsum. Curabitur magna purus, interdum non accumsan quis, bibendum euismod ante. Curabitur non suscipit ligula. Aliquam id leo ac dolor eleifend mattis. Maecenas neque dui, vestibulum vel massa nec, pharetra 
 
     sagittis libero. Nunc sit amet aliquet arcu, tempor dapibus lectus. Suspendisse laoreet massa ac tortor egestas sollicitudin. Interdum et malesuada fames ac ante ipsum primis in faucibus.</p> 
 
    </div> 
 
    <nav id="nav" aria-label="Page navigation"> 
 
    <ul class="pagination"> 
 
     <li> 
 
     <a href="#" aria-label="Previous" class="prev"> 
 
      <span aria-hidden="true">&laquo;</span> 
 
     </a> 
 
     </li> 
 
     <li class="active"><a href="#" class="One">1</a></li> 
 
     <li><a href="#" class="Two">2</a></li> 
 
     <li><a href="#" class="Three">3</a></li> 
 
     <li><a href="#" class="Four">4</a></li> 
 
     <li><a href="#" class="Five">5</a></li> 
 
     <li> 
 
     <a href="#" aria-label="Next" class="next"> 
 
      <span aria-hidden="true">&raquo;</span> 
 
     </a> 
 
     </li> 
 
    </ul> 
 
    </nav> 
 
</div>

EDIT 1

var ArrayOfPages = ['One', 'Two', 'Three', 'Four', 'Five']; 

この配列は、ウェブページの名前の配列です。 1つ、2つというWebページがあるとしたらどういう意味ですか...

これらの名前は配列に配置します。

名前が一致しないと、ウェブページが開かれず、 のページが現在のページ の名前と一致しないため、このページをアクティブにしません。

EDIT 2

私はデモを作成するためにGithub projectを作成しました。