Question

我正在尝试用另一页中的类似div替换一个div。两个页面都具有相似的结构，并使用相同的自定义CSS。但是当我加载一个div时，它就再也没有了。这是页面（让我们假设我加载的页面看起来完全相同）。如何在加载的div中保存我的RadioTheme.css样式？

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
          "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
    <title>jQuery Mobile Media</title>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" href="jquery-mobile-theme/themes/RadioTheme.css" />
    <link rel="stylesheet" href="jquery-mobile-theme/themes/jquery.mobile.icons.min.css" />
    <link rel="stylesheet" href="jquery.mobile-1.4.5/jquery.mobile.structure-1.4.5.min.css" />
    <script type="text/javascript" src="jquery-1.12.4/jquery-1.12.4.js"></script>
    <script type="text/javascript" src="jquery.mobile-1.4.5/jquery.mobile-1.4.5.min.js"></script>
    <!--Menu Tabs-->
    <script type="text/javascript" src="scripts/MenuTabs.js"></script>
</head>
<body>
    <div data-role="page" id="settingsPage"><!--Page-->
        <!--Header-->
        <div data-role="header">
            <h1 id="header">Radio Record</h1>
        </div><!--Header-->

        <!--Menu Tabs-->
        <div data-role="navbar">
            <ul id="menuTabs">
                <li><a href="" onclick="SwitchTab('index.html')">Page 1</a></li>
                <li><a href="" onclick="SwitchTab('myStations.html')">Page 2</a></li>
                <li><a href="" onclick="SwitchTab('settings.html')">Page 3</a></li>
            </ul>
        </div><!--Menu Tabs-->

        <!--Replacable Content-->
        <div role="main" class="ui-content" id="replacable">
            <label>Alarm Clock Volume:</label>
            <!--Volume-->
            <form>
                <input type="range" name="alarmVolume" id="alarmVolume" data-highlight="true"
                       min="0" max="100" value="30" onchange="SetAlarmVolume()">
            </form><!--Volume-->
        </div><!--Replacable Content-->

        <!--Footer-->
        <div data-role="footer">
            <h1 id="footer">Radio Record</h1>
        </div><!--Footer-->

    </div><!--Page-->
</body>
</html>

//对应的Javascript看起来像这样：

function SwitchTab(page) {
    var toLoad = page + ' #replacable';
    $('#replacable').hide();
    $('#replacable').load(toLoad);
    $('#replacable').show();
}

jquery load函数不加载原始样式

0 个答案: