2012-01-16 100 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

相关问题