2017-02-25 1 views
0

たとえば、ある種のコンテンツを持つ2番目のページへのリンクを含むホームページ、たとえば<details>要素があるとします。今度は、2ページ目の<details>要素が「デフォルトで」閉じられますが、ホームページのリンクを<details>要素にリダイレクトして開きたいとします。開け方<details>他のページのリンクから

私は基本的なhtml/cssとjavascriptでこれをしたいと思います。ここで私はこれまで持っているものです。
home.html

<html> 
    <head> 
    <script type="text/javascript"> 
     window.onload = function() { 
     var a = document.getElementById("mylink"); 
     a.onclick = function() { 
      var b = document.getElementById("mydetails"); 
      b.open = true; 
      b.style.color = "red"; // just to try another property 
      return false; 
     } 
     } 
    </script> 
    </head> 
    <body> 
    <h1>Home Page</h1> 
    <h2><a id="mylink" href="second_page.html#mydetails">Go to 2nd page</a></h2> 
    </body> 
</html> 

second_page.html

<html> 
    <body> 
    <h1>2nd page</h1> 
    <details id="mydetails" open="false"> 
     <summary>Hello,</summary> 
    </details> 
    </body> 
</html> 

残念ながら、コードの実行が、私は、家庭内のリンク、<details>内をクリックしたとき2ページ目が開かない。私はどうすればこれについて行くことができますか?

JS関数にパラメータとしてリンク要素とターゲット要素の両方のidsを渡すことができたら、ボーナスポイント。

関連質問:

  1. How to use a link to call JavaScript?、私は私のコード
  2. Automatically open <details> element on ID callのほとんどを得たところから、これは私が達成したいもののようですが、私はそれが動作するように取得する方法がわかりませんこれらの線に沿って何かが動作するはず

答えて

1

Javascriptを使用してアクティブではない別のページを変更することはできません。 Javascriptはアクティブなページでのみ実行され、アクティブなページのDOMを変更できます。あなたは次のページに値を送る必要があります。

HTML5セッションストレージのデータを送信するために:

home.html 
    <script type="text/javascript"> 
     window.onload = function() { 
      var a = document.getElementById("mylink"); 
      a.onclick = function() { 
       localStorage.setItem("open", "true"); 
      } 
     } 
    </script> 

    second_page.html 
    <script> 
     var val = localStorage.getItem("open"); 
     if (val == "true") { 
      var b = document.getElementById("mydetails"); 
      b.open = true; 
      b.style.color = "red"; 
      localStorage.removeItem("open"); 
      } 
    </script> 
+0

ありがとう、それは働いた!私は余分な質問があります: '

'要素から 'open =" false "'を取り除くと、なぜもう動作しませんか? –

+0

@PierPaolo '

'これはどういう意味ですか? 'open'プロパティがなければ?? – Ayush

+1

@PierPaolo変更するには 'open'のようなプロパティがないので、動作しません。 – Ayush

1
function(link,target){ 
    //set the click function of the given id (link) 
    $('#'+link).click(function() { 
    //get the details panel from the next page 
    var details = $(target+'#mydetails'); 
    //set its state to true 
    details.open = true; 
    //redirect to that page 
    window.location.replace(details); 
}); 
} 

。 これはjqueryを使用しています。うまくいけばOKです。

+0

最後に私は、私はともっとよく知っているが、それにもかかわらず、あなたの助けをありがとうございましたソリューションを選択しました! –

関連する問題