1

私はJqueryに不慣れで、いくつかの簡単なことを理解しようとしています。さまざまなリンクをクリックすると表示/非表示になるdivがいくつかあります。ユーザーがページをリロードでき、表示していたdivに戻る必要がないように、各divにパーマリンクを設定できるようにしたいと思います。

これが私がこれまでに持っているもののjsfiddleです。

（注：フィドルのフレームワークはデフォルトでMootoolsになります... JQuery UIにリセットしてください。）

私のページは次のように構成されています。

<div style="width:100%; height:40px; text-align:center;">
<a class="one" href="#">One</a>
<a class="two" href="#">Two</a>
<a class="three" href="#">Three</a>
<a class="four" href="#">Four</a> 
</div>
<div id="one">One</div>
<div id="two">Two</div>
<div id="three">Three</div>
<div id="four">Four</div>

このようなJQueryスクリプトを使用

$('a.one').click(function () {
$("#one").show('slide', {
    direction: 'right'});
$("#two:visible, #three:visible, #four:visible").hide('slide', {
    direction: 'left'});
});

$('a.two').click(function () {
$("#two:hidden").show('slide', {
    direction: 'right'});
$("#one:visible, #three:visible, #four:visible").hide('slide', {
    direction: 'left'});
});

$('a.three').click(function () {
$("#three:hidden").show('slide', {
    direction: 'right'});
$("#one:visible, #two:visible, #four:visible").hide('slide', {
    direction: 'left'});
});

$('a.four').click(function () {
$('#four:hidden').show('slide', {
    direction: 'right'});
$("#one:visible, #two:visible, #three:visible").hide('slide', {
    direction: 'left'});
});
4

1 に答える 1

0

アンカーを導入します：<a class="one" href="#one">One</a>

JSでは次のことができます。

$(document).ready(function(){
    hash = location.hash
    if(hash) {
        name = hash.substr(1)
        $('a.'+name).click();
    }
});

これは次のことを行います。ページが読み込まれると、ハッシュをチェックし（eg #one）、名前を取り出します（ "one"）。これで、要素アンカーのクリックをシミュレートします（例a.one）。もちろん、これはイベントをバインドした後に行います。

注：多くのjQueryイベントには、「getter」および「setter」の動作があります。パラメーターなしで呼び出された場合、値を返したり、イベントをトリガーしたりします。値を渡すときに、新しい値/イベント関数などが割り当てられます。詳細については、リンクされたドキュメントを参照してください。

于 2013-03-14T00:01:47.497 に答える