0

我正在将存储在磁盘上的一些 HTML 动态加载到 div 中，如下所示：

$('#FictionContent').load('Content/HuckFinn.html');

给出一些背景：

    $(document).ready(function () {
            $('#tabs').tabs({
                beforeActivate: function(event, ui) {
                    if (ui.newTab.index() == 0) { // index 0 is fiction
                        $('#body').removeClass('bronzeBackground silverBackground goldBackground').addClass
('bronzeBackground');
                        $('#FictionContent').load('Content/HuckFinn.html');

FictionContent 的定义如下：

<div id="FictionContent" class="clearfix">Content in Fiction tab</div>

这里有一些背景：

<div id="tabs" class="content-wrapper">
<ul>
    <li><a href="#tab-Fiction">Fiction</a></li>
    <li><a href="#tab-Nonfiction">Nonfiction</a></li>
    <li><a href="#tab-MiscTwain">Miscellaneous</a></li>
</ul>
<div id="tab-Fiction">
    <select id="fictionDropDown">
        <option value="HuckFinn">Huck Finn</option>
        <option value="TomSawyer">Tom Sawyer</option>
        <option value="tPatP">Prince and the Pauper</option>
        <option value="ConnYank">Connecticut Yankee</option>
        <option value="Gilded">The Gilded Age</option>
        <option value="Puddnhead">Pudd'nhead Wilson</option>
        <option value="ShortStories">Short Stories</option>
    </select>
    <div id="FictionContent" class="clearfix">Content in Fiction tab</div>
</div>

FictionContent 使用的 clearfix CSS 类在 Site.css 中是这样的：

.clearfix:after {
    content: ".";
    display: block;
    clear: both;
    visibility: hidden;
    line-height: 0;
    height: 0;
}

我在其中添加了这个：

background-color: black;

...但无济于事 - 没有改变背景颜色。

我还尝试将其添加到我正在加载的 HTML 文件 (HuckFinn.html) 的顶部：

<style>
    background-color: black;
</style>
<h1>The Adventures of Huckleberry Finn</h1>

有一些上下文：

<style>
    background-color: black;
</style>
<h1>The Adventures of Huckleberry Finn</h1>

<h3>Scene:  The Mississippi Valley Time:  Forty to fifty years ago</h3>
. . .

这也不起作用。

那么我怎样才能让背景变黑，就像我在这里做的那样：

?

4

2 回答 2

5

在您的第一次尝试中，您将 css 添加到了伪元素（请参阅http://www.w3schools.com/css/css_pseudo_elements.asp）。其他 2 次尝试使用 <style> 并没有特别添加它。采用

#FictionContent {
  background: black;
}

附加到您的 CSS 文件，使其看起来像这样：

.clearfix:after {
    content: ".";
    display: block;
    clear: both;
    visibility: hidden;
    line-height: 0;
    height: 0;
}

#FictionContent {
 background: black;
}
于 2015-03-26T00:16:05.820 回答
2

一个简单的解决方法是在 JS 中的负载线之后添加它。

 $('#FictionContent').css('background-color', '#000000');
于 2015-03-26T00:17:08.483 回答