需要指向隐藏的div

Question

我是编程新手，很想了解我的代码中发生了什么，但与任何事情一样，这需要时间。我知道这可能是明显的与某人体验，但我不知道如何做到这一点......我一直在使用达克特的JavaScript书籍作为参考和指南。这个代码是从他那里借来的。

我需要能够引用和显示每个面板。我试过引用index.html＃tab-1等。我不知道如何另外设置一个位置，以便它可以指向。多余的方法是为每个面板创建新的页面，但我希望内容是动态的，并且文件结构是干净的。请帮忙。

Here is a codepen

HTML结构：

<ul class="tab-list"> 
     <li class="active"><a class="tab-control" href="#tab-1">Mission &amp; Vision</a></li> 
     <li><a class="tab-control" href="#tab-2">Facilities &amp; Services</a></li> 
     <li><a class="tab-control" href="#tab-3">Policies</a></li> 
     <li><a class="tab-control" href="#tab-4">History</a></li> 
    </ul> 

    <div class="tab-panel active" id ="tab-1"> 
    <p> Content etc. </p> 

    <div class="tab-panel active" id ="tab-2"> 
    <p> Content etc. </p> 

    <div class="tab-panel active" id ="tab-3"> 
    <p> Content etc. </p> 

的Javascript：

$('.tab-list').each(function(){     // Find lists of tabs 
var $this = $(this),       // Store this list 
    $tab = $this.find('li.active'),    // Get the active list item 
    $link = $tab.find('a'),      // Get link from active tab 
    $panel = $($link.attr('href'));    // Get active panel 

$this.on('click', '.tab-control', function(e) { // When click on a tab 
e.preventDefault();       // Prevent link behavior 
var $link = $(this),       // Store the current link 
    id = this.hash;       // Get href of clicked tab 

if (id && !$link.is('.active')) {    // If not currently active 
    $panel.removeClass('active');    // Make panel inactive 
    $tab.removeClass('active');     // Make tab inactive 

    $panel = $(id).addClass('active');   // Make new panel active 
    $tab = $link.parent().addClass('active'); // Make new tab active 
    } 
}); 
}); 

Answer 1

更新codepen（http://codepen.io/anon/pen/JodKEd#load-tab-2）与内部和exetnal链接工作。 （固定.tab-control点击功能）

$('.tab-list li').on('click', '.tab-control', function(e){ 
    e.preventDefault(); 
    id = this.hash; 
    activateTab(id); 
}); 

$("a.direct").on('click',function(e){ 
    e.preventDefault(); 
    id = this.hash; 
    activateTab(id); 
}); 

function activateTab(id){ 
    var li = $("li a[href="+id+"]").parent(); 
    if (id && !li.is('.active')) { 
     $("li.active").removeClass('active'); 
     $('.tab-panel').removeClass('active'); 
     $(id).addClass('active');  
     $("li a[href="+id+"]").parent().addClass("active"); 
    } 
} 

if(document.location.hash){ 
    //if(write_here_some_check_for_valid_hash: #load-tab-x){ 
     var hash = document.location.hash.split("-"); 
     var id = "#"+hash[1]+"-"+hash[2]; 
     activateTab(id); 
    //} 
} 

在外部连结用#load-tab-2散列加载tab-2。散列中的load前缀是为了防止页面自动滚动。