使用導航鏈接（列表）向右或向左滑動menu-content div到容器div？

Question

編輯： 問題：如何正確使用.slide（）用於多個div。

我的頁面包含導航欄（在一個div中）後面跟着另一個div，這是一個容器， 在此容器div中，我有5個其他div（標記爲col-2至col-6的id，內容

我想通過col-6 divs將這些col-2滑動到視圖中，當導航欄中的相應鏈接被點擊時不希望代碼爲我執行而只是詢問如何執行它的例子，鏈接到其他JSfiddles類似的東西（滑動div到另一個div的中心）

不尋找fadeOut或fadeIn代碼，或從點擊鏈接滑下的代碼

當鏈接被點擊我想相應的內容div來從左側或右側滑動，當另一個鏈接被點擊當前DIV滑出和新的div sildes的（相當平直向前）只需要方向，甚至什麼去什麼在代碼寫作， 我不需要有人花時間和爲我做的工作，只需要幫助搞清楚該怎麼辦...

我是否需要jQuery UI的關聯向上？什麼是鏈接它的正確方法導致我無法從我的網頁上獲得從Goodle的UI鏈接工作。

撥弄我已經把它貼只是代碼IM一起工作的想法。 ID更喜歡）鏈接到說明如何正確使用.slide（其它來源尤其是與多個div

<div class="nav-bar"> 
    <ul> 

     <li><a class="nav1" id="col-2" href="#col-2">HOME</a></li> 

     <li><a class="nav1" ide="col-3" href="#col-3">ABOUT</a></li> 

     <li><a class="nav1" id="col-4" href="#col-4">PUBLISHED</a></li> 

     <li><a class="nav1" id="col-5" href="#col-5">PROJECTS</a></li> 

     <li><a class="nav1" id="col-6" href="#col-6">CONTACT</a></li> 

    </ul> 
    </div> 
    <div class="container"> 
    <div class="menu-content col2" id="col2"> 
     <h1>Author of "wall of tears" series</h1> 
     <p> Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. 
     Mauris placerat eleifend leo. Quisque sit amet est et sapien ullamcorper pharetra. Vestibulum erat wisi, condimentum sed, commodo vitae, ornare sit amet, wisi. Aenean fermentum, elit eget tincidunt condimentum, eros ipsum rutrum orci, sagittis 
     tempus lacus enim ac dui. Donec non enim in turpis pulvinar facilisis. Ut felis. Praesent dapibus, neque id cursus faucibus, tortor neque egestas augue, eu vulputate magna eros eu erat. Aliquam erat volutpat. Nam dui mi, tincidunt quis, accumsan 
     porttitor, facilisis luctus, metus</p> 

    </div> 
    <!-- end col2--> 




    <div class="menu-content col3" id="col3"> 
     <img class="bio" src="_imgs/walloftears.jpg" /> 
    </div> 
    <!-- end col3--> 

    <div class="menu-content col4" id="col4"> 
     <p>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. 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.</p> 
    </div> 
    <!-- end col4--> 


    <div class="menu-content col5" id="col5"> 
     <p>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. 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.</p> 
    </div> 
    <!-- end col5--> 


    <div class="menu-content col6" id="col6"> 
     <p>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. 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.</p> 
    </div> 
    <!-- end col6--> 

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

https://jsfiddle.net/Pinky_M/rp8gudhr/4/

創建一個朋友的網頁，問題是，我已經搜查，作爲試驗盡我所能。即時通訊新的javascript/jquery我可以閱讀它（一旦所有的代碼被寫入），但我有麻煩寫自己。 想當在導航的鏈接之一被點擊相應的菜單內容DIV幻燈片從右側或放入容器DIV，離開的時候鏈接被點擊刪除以前的div接下來通過滑動它作爲新一幻燈片（或新的幻燈片放在另一個幻燈片後面），我發現有無數的教程和其他項目使用這種技術，但是我對我的生活無法完成它，現在感到沮喪。雖然我用jQuery更好一些，但我更喜歡用它。

鏈接到我用所有HTML和CSS製作的小提琴我正在使用，jQuery鏈接雖然高達jQuery UI的不是，因爲它似乎不喜歡鏈接給我。謝謝你提前爲任何幫助

Answer 1

我想你應該可以投資於「引導」，使您的生活更輕鬆。
試試這個：

<body> 

<div class="container"> 
    <h2>Dynamic Tabs</h2> 
    <ul class="nav nav-tabs"> 
    <li class="active"><a data-toggle="tab" href="#home">Home</a></li> 
    <li><a data-toggle="tab" href="#menu1">Menu 1</a></li> 
    <li><a data-toggle="tab" href="#menu2">Menu 2</a></li> 
    <li><a data-toggle="tab" href="#menu3">Menu 3</a></li> 
    </ul> 

    <div class="tab-content"> 
    <div id="home" class="tab-pane fade in active"> 
     <h3>HOME</h3> 
     <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p> 
    </div> 
    <div id="menu1" class="tab-pane fade"> 
     <h3>Menu 1</h3> 
     <p>Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p> 
    </div> 
    <div id="menu2" class="tab-pane fade"> 
     <h3>Menu 2</h3> 
     <p>Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam.</p> 
    </div> 
    <div id="menu3" class="tab-pane fade"> 
     <h3>Menu 3</h3> 
     <p>Eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo.</p> 
    </div> 
    </div> 
</div> 

</body> 

退房的的jsfiddle這裏：https://jsfiddle.net/rn3ows58/