如何將一個學習更多鏈接直接指向一個選項卡？

Question

不知道如何在這裏解釋我的問題。對不起，如果這個問題重複。這張照片解釋了我想要做的事情，但我不知道該如何解決。

http://i.stack.imgur.com/JgogA.png

我聽說這應該打開許多.html文件，但我認爲這是可以解決使用JavaScript。非常感謝您的回答！

Answer 1

從我對您的問題的理解中，您試圖做的是SPA - 單頁應用程序。

這可以通過很多方式完成，我個人更喜歡使用AngularJS。

我希望這回答了你的問題，祝你好運:)

Answer 2

有噸的插件，可以做到這一點，或者只是自己做吧。

但是，如果你正在尋找ajax標籤，結帳： https://os.alfajango.com/easytabs/#ajax-tabs 這將加載不同標籤上的html文件。

這裏是不使用AJAX的例子，但只有頁面內容： https://codepen.io/cssjockey/pen/jGzuK

的index.html

<ul class="tabs"> 
     <li class="tab-link current" data-tab="tab-1">Tab One</li> 
     <li class="tab-link" data-tab="tab-2">Tab Two</li> 
     <li class="tab-link" data-tab="tab-3">Tab Three</li> 
     <li class="tab-link" data-tab="tab-4">Tab Four</li> 
    </ul> 

    <div id="tab-1" class="tab-content current"> 
     Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. 
    </div> 
    <div id="tab-2" class="tab-content"> 
     Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. 
    </div> 
    <div id="tab-3" class="tab-content"> 
     Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. 
    </div> 
    <div id="tab-4" class="tab-content"> 
     Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. 
    </div> 

</div><!-- container --> 

的style.css

body{ 
    margin-top: 100px; 
    font-family: 'Trebuchet MS', serif; 
    line-height: 1.6 
} 
.container{ 
    width: 800px; 
    margin: 0 auto; 
} 
ul.tabs{ 
    margin: 0px; 
    padding: 0px; 
    list-style: none; 
} 
ul.tabs li{ 
    background: none; 
    color: #222; 
    display: inline-block; 
    padding: 10px 15px; 
    cursor: pointer; 
} 

ul.tabs li.current{ 
    background: #ededed; 
    color: #222; 
} 

.tab-content{ 
    display: none; 
    background: #ededed; 
    padding: 15px; 
} 

.tab-content.current{ 
    display: inherit; 
} 

應用。 js

$(document).ready(function(){ 

    $('ul.tabs li').click(function(){ 
     var tab_id = $(this).attr('data-tab'); 

     $('ul.tabs li').removeClass('current'); 
     $('.tab-content').removeClass('current'); 

     $(this).addClass('current'); 
     $("#"+tab_id).addClass('current'); 
    }) 

})