Question

我必须在某些页面上重新设置一些旧标签，而且我没有选择更新到jquery UI标签等 - 只是为了调整现有的jquery

$('#tabs').find('li').click(function(e){
    if (!$(this).hasClass("active")) {
        var tabNum = $(this).index();
        var nthChild = tabNum+1;
        $("ul#tabs li.active").removeClass("active");
        $(this).addClass("active");
        $("ul#tab li.active").removeClass("active");
        $("ul#tab li:nth-child("+nthChild+")").addClass("active");
    }
});

这适用于标签本身，但我希望能够从其他页面链接到特定标签 - 例如：yoursite.com/your-page#tab-3

如果您有任何想法，将非常感激 - 这里有CodePen：http://codepen.io/tincanben/details/zqmZjR/

Answer 1

利用哈希（就像您在链接中已经拥有的那样）。让您的页面链接传递url和哈希值（最好是每个选项卡的ID）。

yourPage.aspx%23yourTab

然后在yourPage.aspx的pageLoad上抓取＆＃34; hash＆＃34;值减去哈希值

var currModule = window.location.hash.substr(1, window.location.hash.length);

之后，您可以运行类似SetPageTab的函数来打开哈希值并显示相应的选项卡。

switch (currModule) {
    case "tab1":
        $("#aspTab1").show();
        break;
    case "tab2":
        $("#aspTab2").show();
        break;
    case "tab3":
        $("#aspTab3").show();
        break;
    case "tab4":
        $("#aspTab4").show();
        break;
}

Answer 2

您可以使用load来异步加载感兴趣的页面，如：

$(function () {
  $('#tabs').find('li').click(function(e){
    if (!$(this).hasClass("active")) {
      var tabNum = $(this).index();
      var nthChild = tabNum+1;
      $("ul#tabs li.active").removeClass("active");
      $(this).addClass("active");
      $("ul#tab li.active").removeClass("active");
      $("ul#tab li:nth-child("+nthChild+")").addClass("active");
 
      // load the corresponding page
      var cacheObj = $("ul#tab li:nth-child("+nthChild+")");
      cacheObj.find('div.content').load('yoursite.com/your-page#' + cacheObj.attr('id'));
    }
  });
});

ul#tabs {
  list-style-type: none;
  padding: 0;
  float: left;
  margin: 0;
}
ul#tabs li {
  display: inline-block;
  background-color: #e1e1e0;
  padding: 7px 15px;
  cursor: pointer;
}
ul#tabs li:hover,
ul#tabs li.active {
  background-color: #fff;
}
ul#tab {
  list-style-type: none;
  margin: 0;
  padding: 0;
}
ul#tab li {
  display: none;
}
ul#tab li.active {
  display: block;
}

ul#tab li .content {
  display: block;
  clear: both;
  padding: 1em;
}

<script src="https://code.jquery.com/jquery-1.12.3.min.js"></script>

<ul id="tabs">
    <li><a href="#tab-1">Tab 1</a></li>
    <li><a href="#tab-2">Tab 2</a></li>
    <li><a href="#tab-3">Tab 3</a></li>
    <li><a href="#tab-4">Tab 4</a></li>
</ul>

<ul id="tab">
    <li class="active" id="tab-1">
        <div class="content">
            <h3>Tab 1 content</h3>
            <p>Text here1</p>
        </div>
    </li>
    <li id="tab-2">
        <div class="content">
            <h3>Tab 2 content</h3>
            <p>Text here2</p>
        </div>
    </li>
    <li id="tab-3">
        <div class="content">
            <h3>Tab 3 content</h3>
            <p>Text here3</p>
        </div>
    </li>
    <li id="tab-4">
        <div class="content">
            <h3>Tab 4 content</h3>
            <p>Text here4</p>
        </div>
    </li>
</ul>

链接到URL中的特定选项卡

2 个答案: