大佬教程收集整理的这篇文章主要介绍了jquery – 根据窗口大小动态改变类名,大佬教程大佬觉得挺不错的,现在分享给大家,也给大家做个参考。
<div class="container-fluid"> <div class="row-fluid"> <!-- Left menu --> <div class="span2"> <div class="sidebar-nav"> MENU CONTENT GOES HERE </div> </div> <!-- Content --> <div id="mainContent" class="span7"> MAIN CONTENT GOES HERE </div> <!-- Right column --> <div id="rightColumn" class="span3 hidden-phone hidden-tablet"> RIGHT COLUMN GOES HERE </div> </div> </div>
当浏览器窗口调整为平板电脑大小时,rightColumn div将按预期方式进行隐藏 – 但它会在mainContent div旁边留下空格(大小为span3).
我想让mainContent div扩展到全宽(所以填写大小匹配span10).
我正在使用以下jQuery代码来动态地更改mainContent div的类名,以获得这个(并且如预期的那样工作):
$(document).ready(function() { var $window = $(window); // Function to handle changes to style classes based on window width function checkWidth() { if ($window.width() < 980) { $('#mainContent').removeClass('span7').addClass('span10'); }; if ($window.width() >= 980) { $('#mainContent').removeClass('span10').addClass('span7'); } } // Execute on load checkWidth(); // Bind event listener $(window).resize(checkWidth); });
我的问题是:当浏览器窗口调整大小时,这是处理Twitter Bootstrap中跨越变化的首选方法吗?或者我应该只是为了跨平台屏幕尺寸更改span7的CSS以匹配span10?
以上是大佬教程为你收集整理的jquery – 根据窗口大小动态改变类名全部内容,希望文章能够帮你解决jquery – 根据窗口大小动态改变类名所遇到的程序开发问题。
如果觉得大佬教程网站内容还不错,欢迎将大佬教程推荐给程序员好友。
本图文内容来源于网友网络收集整理提供,作为学习参考使用,版权属于原作者。
如您有任何意见或建议可联系处理。小编QQ:384754419,请注明来意。