2012-01-16 128 views
0

我是web designer/css/html編碼器,沒有太多的jQuery經驗。我將非常感謝以下腳本的一些幫助。基本上我有一個3選項卡表單頁面。我希望能夠鏈接到來自3個不同URL的表單頁面,鏈接到各自的選項卡打開和選擇。鏈接到特定的選項卡

現有的jQuery是

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'); 
    }); 
}; 

的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> 

任何人都可以向我解釋,需要在我的Jquery/HTML要添加什麼。

感謝

回答

0

在你創建你需要包括一個資源標識符或查詢字符串來標識其標籤需要打開的頁面中的鏈接:

http://www.page.com/index.html#link1(資源標識符) http://www.page.com/index.html?tab=link1 (查詢字符串)

然後在頁面中使用選項卡,您需要使用一些javascript來檢查參數的存在。您可以通過javascript中的location.href和indexOf來查看param是否存在。基於此,您可以將其中一個選項卡設置爲「有效」

+0

感謝您的回覆。是的,我知道我需要在我的鏈接中使用查詢字符串。我如何去使用您在實際頁面上建議的JavaScript來測試參數? – gek 2012-01-16 14:11:20

相關問題