Question

我使用JQUERY的.html（）函数更改mu网站上的内容。更换内容后，内容不会应用任何CSS并获取Web浏览器的默认样式。如果我按下F5并重新加载页面，则应用CSS，因此问题出在JS上。

JS：

function Go_to_sub_page(page,spage){
    //Get what language that is set
    var lang = document.getElementsByTagName('html')[0].getAttribute('lang');

    //Get and change content
    $.get('pages/' + page + '/' + spage + '.php',{'lang':lang},function(resp){
        $("#container").html(resp);
    });

    //Change URL
    window.history.replaceState("", "THUNDERSTUDIO: " + page, "?lang=" + lang + "&page=" + page + "&spage=" + spage);
}

HTML（即将加载）：

<script src="scripts/create_project_selected.js" type="text/javascript"></script>

<section id="general">
    <span class="label">Title:</span>
    <span id="title" contenteditable>Insert Title</span>
    <select class="font">
        <option id="Arial">Arial</option>
        <option id="Times New Roman">Times New Roman</option>
    </select>
</section>

HTML / PHP（菜单）：

require_once($_SERVER['DOCUMENT_ROOT']."../private_html/allowed_pages.php");
require_once($_SERVER['DOCUMENT_ROOT']."../private_html/lang.php");

$start =    "<ul>

            </ul>";

$create = "<ul>
                <li><a onclick=\"Go_to_sub_page('create','create')\">{$lang['create']['menu']['create']}<a></li>
                <li><a onclick=\"Go_to_sub_page('create','general')\">{$lang['create']['menu']['general']}<a></li>
            </ul>";

$help = "<ul>

            </ul>";

switch($page){
    case"start":
        echo $start;
        break;
    case"create":
        echo $create;
        break;
    case"help":
        echo $help;
        break;
}

CSS 1：html没有使用它，但是如果你想看一下我将它粘贴为链接。 http://pastebin.com/HPYd51rV

CSS 2（影响我想要使用的HTML的CSS）：

<?php
    header("Content-type: text/css; charset: UTF-8");
?>

#general #title{
    margin-left: 4px;
    margin-right: 4px;

    color: red;
}
#general #title:hover{
    color: blue;
}

lang.php是控制网站语言的文件。对这个问题没有影响。
allowed_pages.php只影响菜单。

Answer 1

您的设置非常令人困惑，我能想到这件事的唯一原因是您在一个视图中加载了<link href="css/create.php" rel="stylesheet" type="text/css" />＆＃39;然后用新视图替换该视图（不链接到CSS样式表）来覆盖它：

<script src="scripts/create_project_selected.js" type="text/javascript"></script>

<section id="general">
    <span class="label">Title:</span>
    <span id="title" contenteditable>Insert Title</span>
    <select class="font">
        <option id="Arial">Arial</option>
        <option id="Times New Roman">Times New Roman</option>
    </select>
</section>

解决方案：

在每个视图中包含指向CSS工作表的链接＆＃39;你希望CSS有效。
或者，在页面的某个位置设置一个$(element).append("<link href='' rel='stylesheet' id='unquie_indentifier_so_it_can_be_removed_later' / >")

jquery .html不适用CSS

1 个答案: