如何使用jQuery更改float相反的值

Question

我有以下HTML/CSS结构.

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>

现在我想应用镜像效果,如WHERE float:left更改为float:right和相同的反转WHERE float:right更改为float:left.

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

注意:我在float上保留不同的文件:left class和float:right class.

知道如何使用jQuery代码执行此操作page load.

Answer 1

试试这个：您可以更改菜单的 css 样式属性，如下所示

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

JSFiddle 演示