需要指向隱藏的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前綴是爲了防止頁面自動滾動。