Question

我一直试图弄清楚如何更改位于页脚的排行榜视图中的背景颜色＆＃34; Home＆＃34;下面。我知道这应该是一个简单的案例，但我没有尝试过。这是我的代码，我做错了什么。

<html>

    <head>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" href="http://code.jquery.com/mobile/1.4.4/jquery.mobile-1.4.4.min.css">
    <script src="http://code.jquery.com/jquery-1.11.1.min.js"></script>
    <script src="http://code.jquery.com/mobile/1.4.4/jquery.mobile-1.4.4.min.js"></script>
    </head>

    <style>
    .ui-page { 
        background:#C2C2A3;
    }
    .ui-page .ui-header {
        background: #2F4F4F !important;
    }
    .ui-page .ui-footer {
        background: #2F4F4F !important;
    }
    h1 {
        color: #FFFFFF;
        text-shadow: 2px 2px #B2C2D1;
    }
    .ui-icon-myicon:after {
        background-image: url("img/phone_icon_small.png");
    }
    #footer_color li { 
        background-color:  #2F4F4F;
    }

    #footer_color li.current { 
        background-color:  #2F4F4F ;
    }

</style>

<!-- BODY -->
<body>
    <!-- PAGE -->
    <div data-role="page" id="contacts">
        <!-- HEADER -->
        <div data-role="header"><h1>CONTACTS</h1></div>
        <!-- END HEADER -->

        <!-- CONTENT -->
        <div data-role="main" class="ui-content">
            <ul data-role="listview" data-inset="true">
                <li data-icon="myicon">
                    <a href="#myPopup1" data-rel="popup" class="ui-content" data-transition="flip" data-position-to="window">
                        <img src="http://lorempixel.com/80/40/technics/1/">
                        <h2>Contact 1</h2>
                        <p>Phone: 000-123-4567</p>
                    </a>
                    <a href="tel: 000-123-4567"></a>
                    <div data-role="popup" id="myPopup1">
                        <p class ="popup_text">Please call this number for company information</p>
                    </div>
                </li>

            </ul>
        </div>
        <!-- END CONTENT -->

        <!-- FOOTER -->
        <div data-role="footer">
            <div data-role="navbar" data-iconpos="top">
                <ul id="footer_color">
                    <li class="current">
                        <a href="#home" data-transition="slideup" data-theme="" data-icon="home">Home</a>
                    </li>
                </ul>
            </div>
        </div>
        <!-- END FOOTER -->   
    </div> 
    <!-- END PAGE -->
</body>
<!-- END BODY -->

Answer 1

您应该使用以下CSS来更改footer区域的背景颜色：

#footer_color li.current a { 
    background-color:  #2F4F4F;
}

这是 DEMO 。

在jquery mobile中更改listview项目背景颜色

1 个答案: