0

我正在开发一个小文本框，它将主动显示不同的文本而无需重新加载页面。我使用 javascript 根据用户点击的链接插入文本段落。它可以工作，但是，我还想将样式属性插入到动态插入的内容中。我想这样做是因为 div 的背景将是黑色的。

这是我的 JS

    function navClicked(x){

        //alert("function activated");
        //alert(x);
        if (x == "aboutButton"){
            //alert("About Button");
            document.getElementById('information').innerHTML = "About Click";
        }
        else if(x == "faqButton"){
            //alert("FAQ Button");
            document.getElementById('information').innerHTML = "FAQ Click";
        }
        else if(x == "servicesButton"){
            //alert("Services Button");
            document.getElementById('information').innerHTML = "Services Click";
        }
        else{
            //alert("Contact Button");
            document.getElementById('information').innerHTML = "Contact Click";
        }
    }

这是随之而来的html

<body>
        <div id="navigation">
            <table cellpadding="5">
                <tr>
                    <td>
                        <a onClick="navClicked('aboutButton');" style="cursor: pointer; cursor: hand;">ABOUT ATS</a>
                    </td>
                </tr>
                <tr>
                    <td>
                        <a onClick="navClicked('faqButton');" style="cursor: pointer; cursor: hand;">FAQ</a>
                    </td>
                </tr>
                <tr>
                    <td>
                        <a onClick="navClicked('servicesButton');" style="cursor: pointer; cursor: hand;">SERVICES</a>
                    </td>
                </tr>
                <tr>
                    <td>
                        <a onClick="navClicked('contactButton');" style="cursor: pointer; cursor: hand;">CONTACT</a>
                    </td>
                </tr>               
            </table>
        </div>
        <div id="information">
            <p>
                content
            </p>
        </div>
    </body>

最后是 CSS

<style>
body, div, h1, h2, h3, h4, h5, h6, p, ul, img {margin:0px; padding:0px; }
    p
    {
    color:white;
    }

    #navigation
    {   
        height:145px;
        float:left;
        width:155px;
        background:grey;
    }
    #navigation table
    {
        margin-left:auto;
        margin-right:auto;
        color:white;
    }

    #information
    {
        height:145px;
        float:left;
        width:290px;
        background:black;
    }
</style>

最终产品有效。但是，每当将新文本插入到框中时，它就会变成黑色。然后你无法阅读文本。

这是一个 jsFiddle http://jsfiddle.net/9xahg/

虽然它在小提琴中不起作用，我不知道为什么。但无论如何，它在所有浏览器中都按预期工作，但您无法阅读新文本。

我怎样才能解决这个问题？

4

3 回答 3

1

尝试添加

color: white;

改为#information

这是因为我用它设置了 p 元素的样式，而你在编写新文本时没有打印出 ap 元素......

或者你也可以在编写文本时放入 ap 元素：

document.getElementById('information').innerHTML = "<p>About Click</p>";
于 2013-03-02T21:47:19.990 回答
1

只需添加“颜色：白色；” 在#information CSS 声明中：

#information
{
    height:145px;
    float:left;
    width:290px;
    background:black;
    color: white;
}

它的工作;）

于 2013-03-02T21:48:54.147 回答
0

JQuery 正是为此而设计的，因此您可以像在 CSS 中一样引用 HTML 元素。如果您想使用 JavaScript 为元素设置样式，我强烈建议您使用 jQuery。从长远来看，它会在节省时间方面得到回报。一旦你有了它，就有一个特定的.css()功能可以帮助你。

于 2013-03-02T21:45:50.303 回答