Home>

This is a blue js + table type tab,Part of the tag content is stored in the js array. I personally feel that this special effect is not too reasonable.Because the content output from js will cause a lot of trouble reading the content,Here you should learn a js programming method,The code needs improvement.

First take a look at the running effect screenshot:

The online demo address is as follows:

The specific code is as follows:

<html>
<head>
<title>tab</title>
<meta http-equiv="content-type" content="text/html;charset=gb2312">
<style>
td, a, body {font-size:9pt;color:#000000;}
.divaround_focus {cursor:pointer;background-color:#a1acdb;border-right:solid 1px #a1acdb;border-bottom:solid 1px #333333;border-left:solid 1px #c8ceea;border-top:solid 1px #c8ceea}
.divaround_blur {cursor:pointer;background:#4d5c9f;border-right:solid 1px #eeeeee;border-bottom:solid 1px #333333;border-left:solid 1px #798acc;border-top:solid 1px #a1acdb;color:#ffffff}
.divaround_content {background-color:#a1acdb;border-right:solid 1px #888888;border-bottom:solid 1px #555555;border-left:0px;border-top:solid 1px #c8ceea;}
</style>
</head>
<body>
<script language="javascript">
var aroundinfoarray=new array ();
aroundinfoarray [0]="script resource";
aroundinfoarray [1]="Web skills set";
aroundinfoarray [2]="itInformation Workshop";
function changefocus (obj)
{
for (i=0;i<document.getelementbyid ("leftbuttontable"). rows.length;i ++)
{
 if (document.getelementbyid ("leftbuttontable"). rows [i] .cells [0] == obj)
 {
  document.getelementbyid ("leftbuttontable"). rows [i] .cells [0] .classname="divaround_focus";
  document.getelementbyid ("divaroundcontent"). innerhtml=aroundinfoarray [i];
 } else {
  document.getelementbyid ("leftbuttontable"). rows [i] .cells [0] .classname="divaround_blur";
 }
}
}
</script>
<table cellpadding="0" cellspacing="0" border="0" align="center" bgcolor="#6271b1"><tr><td width="84" valign="top">
   <table cellpadding="0" cellspacing="0" border="0" height="407" width="84">
    <tr><td height="25" align="center" onclick="changefocus (this)">script code</td></tr>
    <tr><td height="25" align="center" onclick="changefocus (this)">Web Tips</td></tr>
    <tr><td height="25" align="center" onclick="changefocus (this)">itfang</td></tr>
    <tr><td></td></tr>
   </table>
  </td><td width="360">
   <table cellpadding="0" cellspacing="0" border="0" width="100%">
    <tr><td height="406" valign="top">content</td></tr>
   </table>
  </td></tr>
  </table>
  <script language="javascript">changefocus (document.getelementbyid ("leftbuttontable"). Rows [0] .cells [0]);
</script>
</body>
</html>
  • Previous Javascript control div attribute dynamic change instance analysis
  • Next A complete example of an image viewer implemented in Java