Changetab功能适用于IE和Chrome,但不适用于FireFox

时间:2013-04-18 20:13:21

标签: javascript html internet-explorer google-chrome firefox

出于某种原因,目前的编码正在我的ebay帐户上使用,它适用于Chrome和EI,但不适用于Firefox。

ebay对可以使用的编码类型有一些限制。

编码如下所示,带有css和all。

    <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <HEAD>
    <TITLE></TITLE>
    <STYLE>
    #maincontent {
        width: 860px;
        position: relative;
        margin-bottom: 20px;
        margin-top: 40px;
        border-top-color: #CCC;
        border-right-color: #CCC;
        border-bottom-color: #CCC;
        border-left-color: #CCC;
        margin-right: auto;
        margin-left: auto;
    }
    #tabContents {
        vertical-align: top;
        padding-top: 5px;
        padding-right: 5px;
        padding-left: 5px;
        border-right-width: thin;
        border-bottom-width: thin;
        border-left-width: thin;
        border-right-style: solid;
        border-bottom-style: solid;
        border-left-style: solid;
        border-top-color: #336633;
        border-right-color: #336633;
        border-bottom-color: #336633;
        border-left-color: #336633;
        font-family: Verdana, Geneva, sans-serif;
        font-size: 12px;
        font-weight: normal;
        color: #21A54F;
        padding-bottom: 10px;
    }
    #TabHidden {
        position: absolute;
        width: 834px;
        left: 57px;
        top: 277px;
        height: 260px;
        clear: both;
        visibility: hidden;
        overflow: hidden;
    }
    #redirect {
        width: 746px;
        margin-left: 56px;
        margin-bottom: 15px;
        font-family: Verdana, Geneva, sans-serif;
        font-style: italic;
        color: #276B3F;
        font-size: 10px;
        text-align: center;
    }
    #TabDivPic {
        height: auto;
        width: 175px;
        margin-right: 30px;
        float: left;
    }
    .conts  {
        visibility:hidden
    }
    .tab    {
        font-family:Verdana, Geneva, sans-serif;
        font-size:10pt;
        text-align:center;
        font-weight:normal;
        color: #FFF;
        background-color: #21A54F;
        border-right-style: solid;
        border-left-style: solid;
        border-right-width: thin;
        border-left-width: thin;
        border-right-color: #CCC;
        border-left-color: #CCC;
    }
    .selTab {
        font-weight:bold;
        text-align:center;
        font-family: Verdana, Geneva, sans-serif;
        color: #FFFFFF;
        background-color: #276B3F;
        font-size: 12px;
    }
    #tabstyle #td {
        font-family: Verdana, Geneva, sans-serif;
        font-size: 12px;
        color: #FFF;
    }
    #tabtable {
        width: 656px;
    }
    </STYLE>
    <SCRIPT language="javascript" type="text/javascript">

    //a public function that the container uses to pass in values for the labels
    function public_Labels(label1, label2, label3, label4, label5, label6, label7){

        t1.innerText = label1;
        t2.innerText = label2;
        t3.innerText = label3;
        t4.innerText = label4;
        t5.innerText = label5;
        t6.innerText = label6;
        t7.innerText = label7;
    }

    //a public function that the container uses to pass in values for the card containers
    function public_Contents(contents1, contents2, contents3, contents4, contents5, contents6, contents7){

        t1Contents.innerHTML = contents1;
        t2Contents.innerHTML = contents2;
        t3Contents.innerHTML = contents3;
        t4Contents.innerHTML = contents4;
        t5Contents.innerHTML = contents5;
        t6Contents.innerHTML = contents6;
        t7Contents.innerHTML = contents7;

        init();
    }

    //sets the default display to tab 1
    function init(){
        tabContents.innerHTML = t1Contents.innerHTML;
    }   

    //this is the tab switching function
    var currentTab;
    var tabBase;
    var firstFlag = true;


    function changeTabs(event){

        if(firstFlag == true){
            currentTab = t1;
            tabBase = t1base;
            firstFlag = false;
        }

        if(window.event.srcElement.className == "tab"){

            currentTab.className = "tab";

            tabBase.style.backgroundColor = "white";

            currentTab = window.event.srcElement;

            tabBaseID = currentTab.id + "base";

            tabContentID = currentTab.id + "Contents";

            tabBase = document.all(tabBaseID);

            tabContent = document.all(tabContentID);

            currentTab.className = "selTab";

            tabBase.style.backgroundColor = "";

            tabContents.innerHTML = tabContent.innerHTML;

        }
    }

    </SCRIPT>
    </HEAD>
    <BODY>
    <div id="maincontent">
    <DIV STYLE="position:relative; top:0px; height:400; width:746px; left:56px; border:none thin gray" onClick="changeTabs(event)" onload="init()">
    <TABLE id="tabtable" CELLPADDING=0 CELLSPACING=0>
        <TR id="tabstyle">
            <TD ID=t1 CLASS=selTab HEIGHT=25>TAB ONE</TD>
            <TD ID=t2 CLASS=tab>TAB TWO</TD>
            <TD ID=t3 CLASS=tab>TAB THREE</TD>
            <TD ID=t4 CLASS=tab>TAB FOUR</TD>
            <TD ID=t5 CLASS=tab>TAB FIVE</TD>
            <TD ID=t6 CLASS=tab>TAB SIX</TD>
            <TD ID=t7 CLASS=tab>TAB SEVEN</TD>
        </TR>
        <TR>
            <TD ID=t1base STYLE="height:2; border-left:solid thin white"></TD>
            <TD ID=t2base STYLE="height:2; background-color:white"></TD>
            <TD ID=t3base STYLE="height:2; background-color:white"></TD>
            <TD ID=t4base STYLE="height:2; background-color:white"></TD>
            <TD ID=t5base STYLE="height:2; background-color:white"></TD>
            <TD ID=t6base STYLE="height:2; background-color:white"></TD>
            <TD ID=t7base STYLE="height:2; background-color:white; border-right:solid thin white"></TD> 
        </TR>


        <TR>
            <TD HEIGHT="*" COLSPAN=7 ID=tabContents>
            content<br>
            content<br>
            content<br>
            content<br>

    </TD>

        </TR>
    </TABLE>
    </DIV>
      <div id="TabHidden">
      <DIV CLASS=conts ID=t1Contents>
            content<br>
            content<br>
            content<br>
            content<br>
      </DIV>

      <DIV CLASS=conts ID=t2Contents>
            content<br>
            content<br>
            content<br>
            content<br>
      </DIV>

      <DIV CLASS=conts ID=t3Contents>
            content<br>
            content<br>
            content<br>
            content<br>
      </DIV>

      <DIV CLASS=conts ID=t4Contents>
            content<br>
            content<br>
            content<br>
            content<br>
      </DIV>

      <DIV CLASS=conts ID=t5Contents>
            content<br>
            content<br>
            content<br>
            content<br>
      </DIV>

      <DIV CLASS=conts ID=t6Contents>
            content<br>
            content<br>
            content<br>
            content<br>
      </DIV>

      <DIV CLASS=conts ID=t7Contents>
            content<br>
            content<br>
            content<br>
            content<br>
      </DIV>
    </div>
    </DIV>
    </BODY>
    </HTML>
抱歉这个烂摊子。这是我第一次在这个网站上进行这种编码。

0 个答案:

没有答案