特定のタブにリンクする

Question

私はjQueryの経験があまりないWebデザイナー/ CSS/HTMLコーダーです。私は次のスクリプトに関する助けを感謝します。基本的に私は3つのタブフォームページを持っています。 3つの異なるURLからフォームページにリンクし、それぞれのタブを開いて選択したいと思っています。

既存のjQueryは、HTMLが

<div class="component tab"> 
<nav id="nav"> 
    <ul class="tabset"> 
    <li><a class="active" href="#"><span>Option 1</span></a></li> 
    <li><a href="#"><span>Option 2</span></a></li> 
    <li><a href="#"><span>Option 3</span></a></li> 
    </ul> 
</nav> 
<div class="tab-wrapper"> 
<div id="1"> 
<form class="search" action="#"> 
<fieldset> 
    <header> 
    <h2>Heading 1</h2> 
    </header> 
    <div class="row-holder"> 
    <input id="checkbox7" class="checkbox" type="checkbox"> 
    <label for="checkbox7">Lorem ipsum</label> 
    </div> 
    </div> 
    </div> 
</fieldset> 
<div id="2"> 
<form class="search" action="#"> 
    <div class="form-wrapper"> 
    <fieldset> 
    <header> 
     <h2>Heading 2</h2> 
    </header> 
    <div class="row-holder"> 
     <input id="checkbox7" class="checkbox" type="checkbox"> 
     <label for="checkbox7">Lorem ipsum</label> 
    </div> 
    </div> 
    </div> 
    </fieldset> 
    </div> 
    <input type="reset" class="search" value="Clear"> 
    <input type="submit" class="search" value="Search"> 
</form> 
</div> 
<div id="3"> 
<fieldset> 
    <header> 
    <h2>Heading 3</h2> 
    </header> 
    <div class="row-holder"> 
    <input id="checkbox7" class="checkbox" type="checkbox"> 
    <label for="checkbox7">Lorem ipsum</label> 
    </div> 
    </div> 
    </div> 
</fieldset> 
</div> 
</div> 

ある

function tabcomponent() { 
    $('.tabset li a').click(function (e) { 
     e.preventDefault(); 
     var index = $('.tabset li a').index(this) + 1; 
     var selector = 'div#' + index; 
     $('.tab-wrapper > div').hide(); 
     $('.tab-wrapper ' + selector).show(); 
     $('.tabset li a').removeClass('active'); 
     $(this).addClass('active'); 
    }); 
}; 

で誰もが私のjqueryの/ htmlの中に追加する必要があるものを私に説明できます。

おかげで、あなたはリソース識別子またはタブが開いている必要がありますアイデンティティにクエリ文字列を含める必要がページに作成しているリンクで

Answer 1

：

http://www.page.com/index.html#link1（リソース識別子） http://www.page.com/index.html?tab=link1 （クエリ文字列）

そしてタブのあるページでは、パラメータの存在を確認するためにJavaScriptを使用する必要があります。 javascriptでlocation.hrefを、indexOfでparamが存在するかどうかを調べることで、これにアクセスできます。これに基づいて、タブの1つを「アクティブ」に設定することができます