如何将一个学习更多链接直接指向一个选项卡？

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'); 
    }) 

})