Jquery 将html代码加载到div中，未应用css_Jquery_Html_Css

Jquery 将html代码加载到div中，未应用css

jquery html css

Jquery 将html代码加载到div中，未应用css,jquery,html,css,Jquery,Html,Css,我有一个名为index.HTML的HTML页面，有两个div，如下所示： <html> <head> <link rel="stylesheet" type="text/css" href="css/mystyle.css" media="all" /> <script type="text/javascript" src="js/jquery-1.6.4.min.js"></script>

我有一个名为index.HTML的HTML页面，有两个div，如下所示：

<html>
    <head>
        <link rel="stylesheet" type="text/css" href="css/mystyle.css" media="all" />
        <script type="text/javascript" src="js/jquery-1.6.4.min.js"></script>
        <script language="javascript">
        $('#menu1').click(function(){
            $("#content").load( "new_content.html" );
        });
        </script>
    </head>
    <body>
        <div id="menu">
            <ul>
                <li id="menu1">menu item 1</li>
                <li>menu item 2</li>
                <li>menu item 3</li>
            </ul>
        </div>
        <div id="content">
            Hello World
        </div>
    </body>
</html>

我遇到的第一个问题只发生在chrome上，第二个问题发生在所有浏览器上。当我单击“menu item 1”列表元素时，content div被更新，我看到了H1标题及其下面的两行，但我发现以下两个问题：

这两行是黑色的，css没有被应用当我通过在浏览器中右键单击来使用视图源代码时，content div包含旧代码，即helloworld。所以我有点困惑，因为我可以清楚地看到H1标题和它下面的两行，但是没有应用css，浏览器似乎认为没有发生任何变化

也许我遗漏了一些东西，我对jQuery还很陌生，也许加载函数不打算以这种方式使用

如果您能就此问题提供任何启示，我将不胜感激

问候

Crouz

我刚刚在IE10、FF、Chrome、Safari中试用了你的代码，CSS在所有这些软件中都运行良好。我把所有东西都复制到本地机器上

关于问题1：确保正确加载CSS文件。[可能您有路径问题] 通过将class=blue分配给外部加载之前存在的一些内容，可以非常快速地检查它，并查看它是否适用

比如：

    <ul>
        <li id="menu1" class="blue">menu item 1</li>
        <li>menu item 2</li>
        <li>menu item 3</li>
    </ul>

关于问题2：这是完全正常的，HTML源代码是原始HTML，只有您的DOM发生了更改-您可以通过任何浏览器中的页面检查器查看这些更改

编辑：因为你的评论

显然，这是由于浏览器现金造成的。当所有内容都是黑色时，浏览器保存了旧的样式使用CTRL+F5刷新页面以重新加载所有内容

另外，关于“加载”：从

补充说明：

由于浏览器的安全限制，大多数Ajax请求都受同源策略的约束；请求无法从其他域、子域或协议成功检索数据

试试这个：

$('#contentPagina').load(nombrePagina,function(){ $('#contentPagina').trigger('create'); });

第一页的css是什么？ie:menu，ul的li'sCSS是否适用于初始内容？i、例如，当你用一个彩色的span替换Hello World时会发生什么？@Keith css只是你在那里看到的。它包含在index.html页面的head标记中。视图源代码以这种方式运行是完全正常的。它声明它向您显示页面的源代码，页面加载后它实际上不会改变。改变的是DOM。要检查这一点，请使用您最喜欢的开发人员工具来检查most中默认情况下的某些元素F12browsers@subsub是的，它确实有效。当我点击菜单项1时，它实际上在IE和firefox中运行良好，但在chrome中不起作用

    <ul>
        <li id="menu1" class="blue">menu item 1</li>
        <li>menu item 2</li>
        <li>menu item 3</li>
    </ul>

$('#contentPagina').load(nombrePagina,function(){ $('#contentPagina').trigger('create'); });