zoukankan      html  css  js  c++  java
  • javascript+Css+div

    html:

    <link href="style.css" type=text/css rel=stylesheet>
    <style type="text/css">
    <!--
    body {
        margin-left: 0px;
        margin-top: 0px;
        margin-right: 0px;
        margin-bottom: 0px;
    }
    .STYLE4 {font-size: 12px}
    -->
    </style>

    <SCRIPT type=text/javascript>
    var oldmenu = 1;
    function changeTD(tdIndex)
    {
            td = document.getElementById("td" + tdIndex);
            a = document.getElementById("a" + tdIndex);
            content = document.getElementById("content" + tdIndex);
            if(oldmenu!=0){
            tdx = document.getElementById("td" + oldmenu);
            ax = document.getElementById("a" + oldmenu);
            contentx = document.getElementById("content" + oldmenu);
            tdx.className = "hidden";
            ax.className = "nav2_link";
            contentx.className = "hiddencontent";
            }
            td.className = "active";
            a.className = "nav1_link";
            content.className = "activecontent";
            oldmenu = tdIndex;
    }
    </SCRIPT>

    <div>
    <table width="100%" border="1" cellspacing="3" bordercolor="#FFFFFF">
      <tr>
        <td width="20%" align="center" bordercolor="#CCCCCC" class="active" id="td1"><table width="100%" border="0" cellspacing="4">
            <tr>
        <td align="center"><a class="nav1_link" id="a1" onmouseover="changeTD(1); return false;" target="_self">1</a> </td>
        <td class="hidden" id="td2"><a class="nav2_link" id="a2" onmouseover="changeTD(2); return false;" target="_self">2</a></td>
        <td class="hidden" id="td3"><a class="nav2_link" id="a3" onmouseover="changeTD(3); return false;" target="_self">3</a></td>
        <td class="hidden" id="td4"><a class="nav2_link" id="a4" onmouseover="changeTD(4); return false;" target="_self">4</a></td>
        <td class="hidden" id="td5"><a class="nav2_link" id="a5" onmouseover="changeTD(5); return false;" target="_self">5</a></td>
            </tr>
    </table>



    <div class=activecontent id=content1>
    1
    </div>

    <div class=hiddencontent id=content2>
    2
    </div>

    <div class=hiddencontent id=content3>
    3
    </div>

    <div class=hiddencontent id=content4>
    4
    </div>

    <div class=hiddencontent id=content5>
    5
    </div>
    </div>

     style.css:

     .active {
        BACKGROUND-IMAGE: url(../images/pic01.jpg)
    }
    .hidden {
        BACKGROUND-IMAGE: url(../images/menu_bg2.jpg)
    }
    .activecontent {
        
    }
    .hiddencontent {
        DISPLAY: none
    }

  • 相关阅读:
    vs2005中 fstream 不支持中文路径问题的解决方法:
    CString char* string 互转
    OpenGl显示,任意大小的图片作为背景
    combo box
    Android 开发环境搭建
    打开子对话框 选择文件
    (转)Static MemoryLayout_shadow memory
    (转)深入剖析I/O约束
    (转)set_input_delay/ set_output_delay之图解
    (转)PrimeTime分析流程
  • 原文地址:https://www.cnblogs.com/JamyWong/p/1722237.html
Copyright © 2011-2022 走看看