2015-07-21 54 views
5

我有以下HTML/CSS结构。如何使用jQuery更改float的相反值

CSS:

<style> 
    #main { 
     width: 100%; 
    } 

    #main-title { 
     background-color: #b5dcb3; 
     width: 100% 
    } 

    #menu { 
     background-color: #aaa; 
     height: 200px; 
     width: 100px; 
     float: left; 
    } 

    #right-menu { 
     background-color: #aaa; 
     height: 200px; 
     width: 100px; 
     float: right; 
    } 

    #content { 
     background-color: #eee; 
     height: 200px; 
     width: 350px; 
     float: left; 
    } 

    #footer { 
     background-color: #b5dcb3; 
     clear: both 
    } 
</style> 

HTML:

<div id="main"> 
    <div id="main-title"> 
     <h1>This is Web Page Main title</h1> 
    </div> 
    <div id="menu"> 
     <div><b>Main Menu</b></div> 
     HTML 
     <br /> PHP 
     <br /> PERL... 
    </div> 
    <div id="content"> 
     <p>Technical and Managerial Tutorials</p> 
    </div> 
    <div id="right-menu"> 
     <div><b>Right Menu</b></div> 
     HTML 
     <br /> PHP 
     <br /> PERL... 
    </div> 
    <div id="footer"> 
     <center> 
      Copyright Area 
     </center> 
    </div> 
</div> 

现在我想申请等,其中float:left改为float:right和相同的反向WHERE float:right改为float:left镜面效果。

代码示例:http://jsfiddle.net/mananpatel/mw1sxpx0/

注:我保持对浮法不同的文件:左类和float:正确的类。

任何想法如何使用jQuery代码在page load上做到这一点。

回答

2

试试这个:您可以更改菜单的CSS样式属性,如下面

$(function(){ 
    $('#menu').css('float','right'); 
    $('#right-menu').css('float','left'); 
}); 

JSFiddle Demo

1

可以作为

.floatright { 
float: right; 
} 
.floatleft { 
float: left; 
} 

创建不同类别,包括本(如适用) 。在文档准备功能()你可以写

$('.floatright').css('float','left'); 
$('.floatleft').css('float','right'); 

这将是一个解决方案,我猜。

将检查其他解决方案,并让你知道,如果找到。

另一种方法:试试这个代码。

$("*").filter(function() { 
if(/^(left)$/.test($(this).css("float"))) { 
$(this).css("float","right"); 
} 

else if(/^(right)$/.test($(this).css("float"))) { 
$(this).css("float","left") 
} 
}); 
+0

'$(“*”)'*方式*太宽泛。只需使用'$('#menu,#右键菜单')' – SeinopSys

+0

感谢您使它具体@ DJDavid98 – 2015-07-21 09:31:15

0

我们可以使用的CSS,我们应该知道ID(elementId)仅

$( '#elementId')赋予各种属性的CSS({ '高度': '70像素', “宽':'280px', 'display':'inline-block', 'float':'left', });