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

不知道如何在這裏解釋我的問題。對不起，如果這個問題重複。這張照片解釋了我想要做的事情，但我不知道該如何解決。如何將一個學習更多鏈接直接指向一個選項卡？

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

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

2016-08-22 R3y

歡迎來到Stack Overflow！預計你至少試圖爲自己編碼。堆棧溢出不是代碼寫入服務。我建議你做一些[**額外的研究**]（http://meta.stackoverflow.com/questions/261592/how-much-research-effort-is-expected-of-stack-overflow-users），無論是通過谷歌或通過搜索，做出嘗試和。如果您仍然遇到麻煩，請返回**您的代碼**並解釋您嘗試過的以及爲什麼它不起作用。 –

您可以編譯特定的'scss'文件，如引導，實現，創建等流行插件的選項卡並使用它們。 –

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

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

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

來源

2016-08-22 10:17:55

你有什麼鏈接可以提及嗎？ :) – R3y

@ R3y有關AngularJS的基礎知識，您可以訪問他們的[網站]（https://angularjs.org/）。對於Ajgular中的基本路由，請參見[this]（https://hello-angularjs.appspot.com/spa#/searchtable）頁面。 –

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

但是，如果你正在尋找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'); 
    }) 

})

來源

2016-08-22 10:21:44 reinierkors

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

回答

相關問題