从URL

Question

链接到一个特定的标签我得rejig某些页面上一些旧的标签，我没有更新到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的页面加载后抢了“散列”值减去哈希

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>