html - 尝试在选项卡中显示聊天室时出现 Div id 问题

Question

我今天的问题很不寻常。我一直在用不同的选项卡编写一个页面，这是一个 Angular 色扮演组。我一直在使用 CSS 和 HTML 来编写此页面的代码。在我一直使用 DIV ID 指定选项卡的地方，当我尝试将聊天室的编码粘贴到其中一个选项卡内时，它没有出现。有什么问题？

问题是我放在 div id="d" 中的编码，我希望它出现，但它不会。这是聊天室的编码，聊天室的编码没有问题，但它不会出现在选项卡中.. 谁能给我解决这个问题？

<style type="text/css">
.logo_div, .fpix_header, .topad, .fpix_asl_table, .profile_text, .nc_profile, #left_container, #profilephoto, #flash_close_butt, #start_chat_but, .uppermenu, #buyers_ad, #flashcontent, .bottombar, .byline, .top-links {
    visibility: hidden !important;
    display: none !important;
}
body {
    color:#3B2D38;
    font-size:10px;
    font-family:arial;
    background-color:#000000 !important;
    background-image:http://i.imgur.com/wqoLIlF.png !important;
    background-position:bottom-center !important;
    background-repeat:repeat !important;
}
h1 {
    margin:30px -220px 100px 800px;
    font-size: 40px;
    color:#777;
    letter-spacing:-2px;
    font-weight:bold;
}
#navi {
    display: block;
    padding:8px;
    color:#0099FF;
    text-transform: uppercase;
    margin: 12px 0px;
    font-size: 8px;
    background: #000000;
    transition: all .2s;
    -o-transition: all .2s;
    -webkit-transition: all .2s;
    -moz-transition: all .2s;
}
#navi:hover {
    cursor:hand;
    cursor:pointer;
    opacity: .80;
    font-size:10px;
    filter:alpha(opacity=80);
    transition: all .1s;
    -o-transition: all .1s;
    -webkit-transition: all .1s;
    -moz-transition: all .1s;
}
#pee {
    left:20px;
    width: 110px;
    top:160px;
    padding:8px;
    text-align: center;
    position: fixed;
    height: 100%;
}
    #margi {
        margin-top:200px;
    }
    #peepee {
        position:fixed;
        left:400px;
        top:70px;
        width:600px;
        height:400px;
        background-color:#fdfdfd;
        color:#333;
        padding:10px;
        -moz-border-radius:2px;
        -webkit-border-radius:2px;
        -o-border-radius:2px;
        border-radius:2px;
    }
    #navi a {
        text-decoration:none;
        color:#666;
    }
    #navi a:hover {
        text-decoration:none;
        color:#666;
    }
</style>

<div id="pee"><div id="margi">
<span id="navi" onclick="document.getElementById('start').innerHTML=document.getElementById('a').innerHTML;">MUSIC</span>
<span id="navi" onclick="document.getElementById('start').innerHTML=document.getElementById('b').innerHTML;">VIP ROOM</span>
<span id="navi" onclick="document.getElementById('start').innerHTML=document.getElementById('c').innerHTML;">OOC LOBBY</span>
<span id="navi" onclick="document.getElementById('start').innerHTML=document.getElementById('d').innerHTML;">MAIN LOBBY</span>
<span id="navi" onclick="document.getElementById('start').innerHTML=document.getElementById('e').innerHTML;">THE STAFF</span>


</div></div>

<div id="peepee">
<div id="start">
<h1><font color="#000E14" face="Nyala">Title</font></h1>


</div>

<div id="a" style="display:none;">
<h1><font color="#0099FF" face="Nyala">Title</font></h1>

</div>

<div id="b" style="display:none;">
<h1><font color="#cccccc" face="Nyala">Titleu</font></h1>

</div>

<div id="c" style="display:none;">
<h1><font color="#cccccc" face="Nyala">Title</font></h1>

</div>


<div id="d" style="display:none;">
<h1><font color="#000000" face="Nyala">Title</font></h1>

<script id="sid0020000050450993620">
(function () {
    function async_load() {
        s.id = "cid0020000050450993620";
        s.src = 'http://st.chatango.com/js/gz/emb.js';
        s.style.cssText = "width:600px;height:350px;";
        s.async = true;
        s.text = '{"handle":"ultimatium1","arch":"js","styles":{"a":"000000","b":100,"c":"FFFFFF","d":"FFFFFF","k":"000000","l":"000000","m":"000000","n":"FFFFFF","q":"000000","r":100,"cvbg":"CC0000","cvw":75,"cvh":40,"surl":0}}';
        var ss = document.getElementsByTagName('script');
        for (var i = 0, l = ss.length; i < l; i++) {
            if (ss[i].id == 'sid0020000050450993620') {
                ss[i].id += '_';
                ss[i].parentNode.insertBefore(s, ss[i]);
                break;
            }
        }
    }
    var s = document.createElement('script');
    if (s.async == undefined) {
        if (window.addEventListener) {
            addEventListener('load', async_load, false);
        } else if (window.attachEvent) {
            attachEvent('onload', async_load);
        }
    } else {
        async_load();
    }
})();
</script>

</div>

Answer 1

“id”在单个 html 页面中是唯一的，因此您必须使用不同的 id，或者使用“class”代替。