0

次のようなリンクを含むページがあります: test1.html

<div>
<a href="test2.html">Go to TAB1</a>
<a href="test2.html">Go to TAB2</a>
</div>

2 番目のページはタブ付きのページです: test2.html

<div id="tab1" class="active-content">      
     <p>Hello this is the first TAB</p>
</div>
<div id="tab2" class="content">
    <p>Hello this is the second TAB</p>
</div>

私がする必要があるのは、Go to TAB2href をクリックしてページtest2.htmlに変更し、div クラスを次のように変更することです (ページの読み込み時に 2 番目のタブを表示するため)。

<div id="tab1" class="content">      
     <p>Hello this is the first TAB</p>
</div>
<div id="tab2" class="active-content">
    <p>Hello this is the second TAB</p>
</div>

JavaScript を使用してみhref="javascript:tab()"ましたが、一度に 2 つのことを行うことはできません。ページは に変わりますtest2.htmlが、ページが読み込まれる前にコードが実行されます。

function tab(){
    window.location.href='test2.html';
    var element = document.getElementById("tab1");
    element.className="content";
    var element = document.getElementById("tab2");
    element.className="active-content";
}

setTimeoutoronloadメソッドを使用してみましたが、何もしませんでした。test2.html に変更し、href をクリックするだけで 2 番目の TAB に変更する必要があります。これを行うにはどうすればよいですか?

4

2 に答える 2

1

まず、URL を使用してデータを送信する必要があります。これは test2 ページによって取得され、対応することができます。

別のページのアンカーへの参照は、ハッシュによって定義されます。

test2.html#tab1

これは通常、ページをアンカーまでスクロールしますが、小さな JavaScript を記述して URL の「#」を解析し、関連するクラスを変更することができます。

var url_raw=window.location.href;

//Split the string at the #, and take the second part
var layer_to_change=url.split("#")[1];

//Set the class of the needed layer
document.getElementById(layer_to_change).className="active-content";

これは、onload イベント ハンドラーに常駐します。

于 2013-04-23T09:31:54.653 に答える