如何显示带有链接到其锚的隐藏元素？

Question

我已经标签菜单使用此代码：

$('#menu').each(function(){ 
    // For each set of tabs, we want to keep track of 
    // which tab is active and it's associated content 
    var $active, $content, $links = $(this).find('a'); 

    // Use the first link as the initial active tab 
    $active = $links.first().addClass('active'); 
    $content = $($active.attr('href')); 

    // Hide the remaining content 
    $links.not(':first').each(function() { 
     $($(this).attr('href')).hide(); 
     $("#tab1").show(); 
    }); 

    // Bind the click event handler 
    $(this).on('click', 'a', function(e){ 
     // Make the old tab inactive. 
     $active.removeClass('active'); 
     $content.hide(); 

     // Update the variables with the new link and content 
     $active = $(this); 
     $content = $($(this).attr('href')); 

     // Make the tab active. 
     $active.addClass('active'); 
     $content.show(); 

     // Prevent the anchor's default click action 
     e.preventDefault(); 

    }); 
}); 

问题是关于直接链接到一个标签（例如，site.com/#tab2)-it不起作用。有没有办法解决这个问题？

Answer 1

检查这个....

Working Example

添加到您的jQuery的

$(document).ready(function(){ 
var x = $(location).attr('href').replace('http://yourdomain.com/yourpage.html' , ""); 
$('a[href="' + x + '"]').click(); 
}); 

Answer 2

为每个标签赋予一个独特的id属性。例如：

<div id="menu"> 
    <div id="tab1">...</div> 
    <div id="tab2">...</div> 
    ... 
</div> 

做一个通用的函数来显示选项卡，因为该标签的ID：

function showTab(tabId) { 

    // find the requested tab using the given id 
    var tab = $(tabId); 

    // Make the old tab inactive. 
    $active.removeClass('active'); 
    $content.hide(); 

    // Update the variables with the new link and content 

    $active = tab; 
    $content = $(tab.attr('href')); 

    // Make the tab active. 
    $active.addClass('active'); 
    $content.show(); 

    // Prevent the anchor's default click action 
    e.preventDefault(); 
} 

使用hashchange事件以显示正确的选项卡，只要哈希值发生变化：

$(window).on('hashchange', function() { 
    showTab(location.href); 
}); 

重写您的点击处理程序以使用showTab方法：

$(this).on('click', 'a', function(e){ 
    showTab($(this).attr('id')); 
}); 

页面加载时开始，选择正确的选项卡：

$(document).ready(function() { 
    showTab(location.href); 
});