在引导中更改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的列类

回答

相关问题