0

他のページにリンクする代わりに、別のコンテンツを切り替える単純な JavaScript を含むメソッドをテストしています。ただし、これを行うと、ブラウザは実際にすべての「ページ」をレンダリングしますが、その一部のコンテンツのみを表示するという問題があります。したがって、履歴はありませんが、異なる URL が続くだけです。試してみgoback(-1)ましたがうまくいきません。試していませんdocument.referrer。質問は、履歴を保存してブラウザに追加できる方法はありますか? 履歴が読み取り専用であることを確認しましたが、履歴を保存できる場合にのみ、HTMLに戻るボタンを作成できます。ここにJavaScriptの部分があります：

function showHome(){
document.getElementById('content1').style.visibility="visible";
document.getElementById('content2').style.visibility="hidden";
document.getElementById('content3').style.visibility="hidden";
document.getElementById('content4').style.visibility="hidden";
document.getElementById('content5').style.visibility="hidden";
document.getElementById('content6').style.visibility="hidden";
}
function showAbout(){
document.getElementById('content1').style.visibility="hidden";
document.getElementById('content2').style.visibility="visible";
document.getElementById('content3').style.visibility="hidden";
document.getElementById('content4').style.visibility="hidden";
document.getElementById('content5').style.visibility="hidden";
document.getElementById('content6').style.visibility="hidden";
}
function showService(){
document.getElementById('content1').style.visibility="hidden";
document.getElementById('content2').style.visibility="hidden";
document.getElementById('content3').style.visibility="visible";
document.getElementById('content4').style.visibility="hidden";
document.getElementById('content5').style.visibility="hidden";
document.getElementById('content6').style.visibility="hidden";
}
function showProjects(){
document.getElementById('content1').style.visibility="hidden";
document.getElementById('content2').style.visibility="hidden";
document.getElementById('content3').style.visibility="hidden";
document.getElementById('content4').style.visibility="visible";
document.getElementById('content5').style.visibility="hidden";
document.getElementById('content6').style.visibility="hidden";
}
function showClient(){
document.getElementById('content1').style.visibility="hidden";
document.getElementById('content2').style.visibility="hidden";
document.getElementById('content3').style.visibility="hidden";
document.getElementById('content4').style.visibility="hidden";
document.getElementById('content5').style.visibility="visible";
document.getElementById('content6').style.visibility="hidden";
}
function showContact(){
document.getElementById('content1').style.visibility="hidden";
document.getElementById('content2').style.visibility="hidden";
document.getElementById('content3').style.visibility="hidden";
document.getElementById('content4').style.visibility="hidden";
document.getElementById('content5').style.visibility="hidden";
document.getElementById('content6').style.visibility="visible";
}

そして、これは私のナビゲーションです：

<ul id="nav" class="grey,menu">
<li><a id="Contact" href="#Contact" onclick="showContact()" class="descriptionContact">Contact<span>Contact description</span></a></li>
<li><a id="Client" href="#Client" onclick="showClient()" class="descriptionClient">Client<span>Client description</span></a></li>
<li><a id="Projects" href="#Projects" onclick="showProjects()" class="descriptionProjects">Projects<span>Project description</span></a></li>
<li><a id="Service" href="#Service" onclick="showService()" class="descriptionService">Service<span>Service description</span></a></li>
<li><a id="About" href="#About" onclick="showAbout()" class="descriptionAbout">About<span>description</span></a></li>
<li><a id="Home" href="#Home#" onclick="showHome()" class="descritionHome">Home<span>Return to main page, all update news are here</span></a></li>

ページ：

<div class="content" id="content2"><div id="contenter">page2</div></div>
<div class="content" id="content3"><div id="contenter">page3</div></div>
<div class="content" id="content4"><div id="contenter">page4</div></div>
<div class="content" id="content5"><div id="contenter">page5</div></div>
<div class="content" id="content6"><div id="contenter">page6</div></div>
4

1 に答える 1

0

コメントの詳細に少し入るには：

  1. 履歴配列:

    var history_array = [];
    関数 show(idx) {
    hide();
    content[idx].style.visibility = 'visible';
    historyArray[] = idx;
    }

show(historyArray[historyArray.length-1]);その後、Go-back-button を呼び出すことができます。を使用して配列の最後のインデックスを削除することもできますhistoryArray.splice(historyArray.length-1, 1);。

したがって、Go-back ボタンのスクリプトは次のようになります。

  1. 上記の例でもすでに使用しているため、elclansコードを説明します。

まず、クラス「コンテンツ」のすべての要素を配列「コンテンツ」に入れます。彼は、各ページの識別子を指定して show() を呼び出します。show() 内で、最初に hide() を呼び出します。hide() は、クラス「コンテンツ」のすべての要素を繰り返し処理し、それらの可視性を「非表示」に設定します。その後、show() は識別子 (int) を配列 "content" のインデックスとして使用し、その要素そのものを "visible" に設定します。

「すべてを非表示にして、クリックした n 番目の要素を表示する」のようなものです。

編集：フォローアップは単なるコメントには長すぎるため：

script-tag の先頭に、次の関数を追加します。

onload=function(){
  if (document.getElementsByClassName == undefined) {
      document.getElementsByClassName = function(className)
      {
          var hasClassName = new RegExp("(?:^|\\s)" + className + "(?:$|\\s)");
          var allElements = document.getElementsByTagName("*");
          var results = [];

          var element;
          for (var i = 0; (element = allElements[i]) != null; i++) {
              var elementClass = element.className;
              if (elementClass && elementClass.indexOf(className) != -1 && hasClassName.test(elementClass))
                  results.push(element);
          }

          return results;
      }
  }
  show(0);

}

次に置き換えます：var content = document.querySelectorAll('.content');

と：var content = document.getElementsByClassName('content');

その後、-tag から onload-event を削除します。

content[idx] が未定義であるという初期エラーが引き続きスローされますが、機能し、その場でそれを取り除くことはできません。最優先事項は機能的な修正を提供することでした-エラーはおそらく読み込み順序が原因です.

于 2013-04-10T07:34:19.973 に答える