利用css背景图片与表格切换的效果

最新推荐文章于 2024-01-17 16:56:37 发布

原创最新推荐文章于 2024-01-17 16:56:37 发布 · 986 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#css #javascript #border #class #stylesheet #layer

本文介绍了一种使用HTML和JavaScript实现的页面切换效果。通过简单的背景图片与表格内容的切换，展示了如何利用JavaScript来控制不同内容的显示与隐藏，同时保持页面元素状态的一致性。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<HTML>
<HEAD>
<TITLE> 背景图片与表格切换的效果 </TITLE>
<META NAME="Generator" CONTENT="EditPlus">
<META NAME="Author" CONTENT="">
<META NAME="Keywords" CONTENT="">
<META NAME="Description" CONTENT="">
<link href="images/css.css" rel="stylesheet" type="text/css">
<style type="text/css">

</style>
<script language="javascript" type="text/javascript">
var id=null;
function nav_click(obj){
   if(id!=null){
   document.getElementById(id).className="Layer1";
   }
   id=obj;
   document.getElementById(id).className="Layer1-1";
}
</script>
<SCRIPT language=JavaScript>
<!--
function tabit(cname,divid,btnid,sname){

if(btnid == "a"){
   document.getElementById(divid+"b").style.display = "none";
   document.getElementById(divid+"c").style.display = "none";
   document.getElementById(cname).className = "btn01a";
}
else if(btnid == "c"){
   document.getElementById(divid+"b").style.display = "none";
   document.getElementById(divid+"a").style.display = "none";
   document.getElementById(cname).className = "btn01c";
}
else{
   document.getElementById(divid+"a").style.display = "none";
   document.getElementById(divid+"c").style.display = "none";
   document.getElementById(cname).className = "btn01b";
}
document.getElementById(divid+btnid).style.display = "";

}
//-->
</SCRIPT>

</HEAD>

<BODY>
<table width="778" border="0" cellpadding="0" cellspacing="0" align="center" bgcolor="#F5F5F5">
<tr>
    <td id=btn01>
<table border="0" cellpadding="0" cellspacing="0">
      <tr>
        <td width="104" height="26" align="center" id="one" onclick="nav_click('one');tabit('btn01','div1','a')" class="Layer1"><A title="" href="javascript:void(0)">1111</a></td>
        <td align="center" width="104" id="two" onclick="nav_click('two');tabit('btn01','div1','b')" class="Layer1"><A title="" href="javascript:void(0)">2222</a></td>
        <td align="center" width="104" id="three" onclick="nav_click('three');tabit('btn01','div1','c')" class="Layer1"><A title="" href="javascript:void(0)">3333</a></td>
      </tr>
    </table>
</td>
</tr>
<tr>
    <td height="140" valign="top">
      <table width="100%" border="0" cellpadding="4" cellspacing="0" class="tableborder" id=div1a >
        <tr>
          <td height="4" bgcolor="#EAE8E7"></td>
        </tr>
        <tr>
          <td height="100" valign="top" bgcolor="#ffffff">aaaaaaaaaa</td>
        </tr>
      </table>

          <table width="100%" border="0" cellpadding="4" cellspacing="0" class="tableborder" id=div1b style="DISPLAY: none">
            <tr>
              <td height="4" bgcolor="#EAE8E7"></td>
            </tr>
            <tr>
              <td height="100" valign="top" bgcolor="#ffffff">bbbbbbbbbbbbb</td>
            </tr>
          </table>

          <table width="100%" border="0" cellpadding="4" cellspacing="0" class="tableborder" id=div1c style="DISPLAY: none" >
            <tr>
              <td height="4" bgcolor="#EAE8E7"></td>
            </tr>
            <tr>
              <td height="100" valign="top" bgcolor="#ffffff">ccccccccccccc</td>
            </tr>
          </table>
    </td>
</tr>
</table>
</BODY>
</HTML>