3

これは私のウェブサイトhttp://www.damianplisko.com です。html ポートフォリオ ページを切り替える前と次のボタンが必要です。メイン メニューに戻る代わりに、次のポートフォリオ ページに移動します。とにかくjsを使ってこれを行うには？

4

2 に答える 2

2

CMS（私がお勧めします）を使用していないので、AJAXや外部ライブラリを使用せずに考えることができる最も簡単な解決策は、すべてのページを表示したい順序で配列を作成することです。

var pages = [
  'MedTech.html',
  'Trainer.html',
  'YoungGuns.html',
  ...
];

次に、現在のページを取得して次のページを確認することにより、新しいURLを設定できます。

var next = document.getElementById('next'); // your DOM element

next.addEventListener('click', function() {

  var current = location.pathname, // current page ie. MedTech.html
      idx = pages.indexOf( current ); // find page in pages array

  // go to next page if page exists
  // otherwise go to first page   
  if ( idx > -1 ) {
    location.pathname = pages[ ++idx ] || pages[0];
  }

});

「戻る」ボタンの場合は、履歴を使用するか、上記の機能を調整するだけです。

編集：idx > -1配列内のすべてのページが確実に存在することを確認すれば、チェックなしで逃げることができます。

于 2012-12-18T03:59:04.560 に答える
0

jquery でこれを行う別の方法は次のとおりです。

    var pages = ['page1.html', 'page2.html', 'page3.html'];

    $(".nav-button").on('click', function () {
        var currentPage = location.pathname,
            idx = pages.indexOf(currentPage),
            newIndex, failOver;
        if (idx > -1) {
            newIndex = $(this).hasClass("next") ? ++idx : --idx;
            failOver = $(this).hasClass("next") ? 0 : 2;
            location.pathname = pages[newIndex] || pages[failOver];
        }
    });
于 2013-09-10T20:09:31.000 に答える