在引導中更改div的列類

我發現了一些類似的問題，但似乎無法讓他們的解決方案爲我工作，所以希望發佈特定的代碼將有所幫助。在引導中更改div的列類

我使用部署在html頁面上的Caspio數據頁。在一個html頁面中，我有一個完整的12列div，當點擊一個鏈接時，我需要將其更改爲9列div。這是因爲我有一個摺疊的3列div，當鏈接被點擊時打開。

所以我需要：在網頁加載時3列格

1）倒塌，12列的div可見。

2）用戶點擊鏈接和3列div是可見的，12列div將更改爲9列div，因此它被移動到3列div 的右側而不是下面。

的Caspio數據頁可以搞的一團糟，如果CSS是激烈的（是隨機的，當它發生，所以我不能詳細描述它），所以我需要保持儘可能簡單。如果我可以將div class="col-md-12"更改爲div class="col-md-9"，那麼鏈接點擊會很棒。我已經看到其他職位與改變列類，但我似乎無法讓他們工作。

這裏是我的工作主要代碼：

<div class="col-md-3" style="overflow-x:hidden;overflow=y:hidden;"> 
 
\t <div id="newcomment" class="collapse"> 
 
\t \t <caspio deploy code for datapage1> 
 
\t </div> 
 
</div> 
 
<div class="col-md-12"> 
 
\t <div> 
 
\t \t <caspio deploy code for datapage2> 
 
\t </div> 
 
</div> 
 

 
<a class="btn page-action" href="#newcomment" style="color:green;" data-toggle="collapse"><i class="fa fa-plus" aria-hidden="true"></i> Add Comment</a>

所以，如果我可以改變DIV class="col-md-12"於#newcomment鏈接點擊，可能應該這樣做，以div的class="col-md-9"。非常感謝提前 -

來源

2017-03-07 Kevin L

有幾種方法可以做到這一點。這裏是一個...

$('#btnSwitch').click(function(){ 
    $('.col-md-3').toggleClass('hide'); 
    $('#right').toggleClass('col-md-12 col-md-9'); 
})

HTML

<div class="container-fluid"> 
    <div class="row"> 
     <div class="col-md-3"> 
       page1 
     </div> 
     <div class="col-md-9" id="right"> 
       page2 
     </div> 
    </div> 
    <br> 
    <button class="btn btn-lg" id="btnSwitch">Switch</button> 
</div>

http://www.codeply.com/go/pFNLZqoZUV

來源

2017-03-07 16:56:50 ZimSystem

這看起來真的睦鄰千恩萬謝。我只是需要它以相反的順序進行。意思是頁面2 div通常在頁面加載時顯示在12列（並且頁面1 div隱藏）。然後當按鈕被點擊時，顯示第1頁div（第3列），並將第2頁div轉換爲第9列。我正在玩這個劇本，但看起來似乎沒有把它弄清楚。有沒有快速切換？ –

好吧我確實讓它使用「崩潰」，然後切換腳本。這非常棒，非常感謝這個簡單而優雅的解決方案。 –

對不起，我不知道在哪裏「接受」答案。這是我在SO上的第一篇文章。我會尋找它。再次感謝您的幫助。 –

在引導中更改div的列類

回答

相關問題