Question

我是网页设计师/ css / html编码器，对jQuery没有多少经验。我会感谢以下脚本的一些帮助。基本上我有一个3选项卡表单页面。我希望能够从3个不同的网址链接到表单页面，链接到打开和选中的相应选项卡。

现有的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中需要添加什么。

由于

Answer 1

在您正在创建页面的链接中，您需要包含资源标识符或查询字符串以标识需要打开哪个选项卡：

http://www.page.com/index.html#link1（资源标识符） http://www.page.com/index.html?tab=link1（查询字符串）

然后在带有选项卡的页面中，您需要使用一些javascript来检查参数是否存在。您可以使用javascript和indexOf中的location.href来访问它，以查明param是否存在。基于此，您可以将其中一个选项卡设置为“活动”

链接到特定选项卡

1 个答案: