求一小段js代码

<div id="div_tool">
<input id="Button1" type="button" value="分类" onclick=">
  <input id="Button２" type="button" value="状态" onclick="/>
  <input id="Button３" type="button" value="时间" onclick="/>
<div id="div1"　style="DISPLAY: none;">分类</div>
<div id="div2" style="DISPLAY: none;">状态</div>
<div id="div3" style="DISPLAY: none;">时间</div>
点击谁谁显示，其他的隐藏，还有就是显示的位置在按纽的下边缘，左边缘与隐藏层的左边缘对齐？正解即结贴

解决方案 »

免费领取超大流量手机卡，每月29元包185G流量+100分钟通话, 中国电信官方发货

使用jquery很简单的就可以实现了
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>无标题文档</title>
</head><body>
<script language="JavaScript1.2">
var ie4=document.all&&navigator.userAgent.indexOf("Opera")==-1;
var ns6=document.getElementById&&navigator.userAgent.indexOf("Opera")==-1;
var ns4=document.layers;function showContent(content)
{
if(ie4)
{
  showContentObj=document.all.qiksearch_div;
}
if(ns6)
{
  showContentObj=document.getElementById("qiksearch_div");
}
if(ie4||ns6)
{
  if(showContentObj.innerHTML!=content)
  {
   showContentObj.innerHTML=content;
  }
  else
  {
   showContentObj.innerHTML="";
  }
}
if(ns4)
{
  document.nsdiv.document.write(content);
  document.nsdiv.document.close();
}
}</script>
<center>
<a href="javascript:void(0);" onClick="javascript:showContent('<font face=verdana,arial,helvetica>This is Content 1</font>');"><font face="verdana,arial,helvetica" color="#CC0000" size="-1"><b>内容一</b></font></a> | <a href="javascript:void(0);" onClick="javascript:showContent('<font face=verdana,arial,helvetica>This is Content 2</font>');"><font face="verdana,arial,helvetica" color="#CC0000" size="-1"><b>内容二</b></font></a> | <a href="javascript:void(0);" onClick="javascript:showContent('<font face=verdana,arial,helvetica>This is Content 3</font>');"><font face="verdana,arial,helvetica" color="#CC0000" size="-1"><b>内容三</b></font></a>
<br><br><layer id="nsdiv" left="310"></layer>
<div id="qiksearch_div"></div></center></body>
</html>
IE8  <div id="div_tool">
    <input id="Button1" type="button" value="分类" onclick="show('1')">
      <input id="Button2" type="button" value="状态" onclick="show('2')"/>
  <input id="Button3" type="button" value="时间" onclick="show('3')"/>
<div id="div1" style="DISPLAY: none; position:relative;">分类</div>
<div id="div2" style="DISPLAY: none; position:relative; left:60px">状态</div>
<div id="div3" style="DISPLAY: none; position:relative; left:120px">时间</div>
</div>
</BODY>
<SCRIPT LANGUAGE="JavaScript">

</SCRIPT>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<HTML>
<HEAD>
  <TITLE> New Document </TITLE>
  <script type="text/javascript">
function showDiv(btn, n){
for(var i = 1; i <= 3; i++){
document.getElementById("div" + i).style.display = "none";
}
var div = document.getElementById("div" + n);
div.style.display = "block";
div.style.position = "absolute";
div.style.left = btn.offsetLeft + "px";
div.style.top = btn.offsetTop + btn.offsetHeight + 1 + "px";
}
  </script>
</HEAD> <BODY>
  <div id="div_tool" >
    <input id="Button1" type="button" value="分类" onclick="showDiv(this, 1)">
  <input id="Button2" type="button" value="状态" onclick="showDiv(this, 2)"/>
  <input id="Button3" type="button" value="时间" onclick="showDiv(this, 3)"/>
<div id="div1" style="DISPLAY: none;">分类</div>
<div id="div2" style="DISPLAY: none;">状态</div>
<div id="div3" style="DISPLAY: none;">时间</div>
</div>
</BODY>
</HTML>
<html xmlns="http://www.w3.org/1999/xhtml" >
<head>
    <title>无标题页</title>
    <script type="text/javascript">
    function xianshi1()
    {
     document.getElementById("div1").style.display="block";
     document.getElementById("div2").style.display="none";
     document.getElementById("div3").style.display="none";

    }
    function xianshi2()
    {
     document.getElementById("div1").style.display="none";
     document.getElementById("div2").style.display="block";
     document.getElementById("div3").style.display="none";

    }
    function xianshi3()
    {
     document.getElementById("div1").style.display="none";
     document.getElementById("div2").style.display="none";
     document.getElementById("div3").style.display="block";

    }


    </script>
</head>
<body>
<div id="div_tool">
    <input id="Button1" type="button" value="分类" onclick="xianshi1()">
      <input id="Button２" type="button" value="状态" onclick="xianshi2()"/>
  <input id="Button３" type="button" value="时间" onclick="xianshi3()"/>
    <div id="div1"　style="DISPLAY: none;" >分类</div>
    <div id="div2" style="DISPLAY: none;">状态</div>
    <div id="div3" style="DISPLAY: none;">时间</div></div></body>
</html>我测试过了，可以实现，呵呵
就是代码不够精炼，
用table改一個<script type="text/javascript" >
var obj;
function show(id) {
    if(obj){
        obj.style.display="none";
    }
    var o=document.getElementById("div"+id.match(/\d/)[0]);
    o.style.display="block";
    obj=o;
}</script>
<table>
<tr>
<td><input id="Button1" type="button" value="code" onclick="show(this.id);"></td>
<td><input id="Button2" type="button" value="status" onclick="show(this.id);"/></td>
<td><input id="Button3" type="button" value="time" onclick="show(this.id);"/></td>
<tr>
</tr>
<td><div id="div1" style="DISPLAY: none;">code</div></td>
<td><div id="div2" style="DISPLAY: none;">status</div></td>
<td><div id="div3" style="DISPLAY: none;">time</div></td>
</tr>
</table>
可以到div外面放个表格。。控制表格的对齐方式。。超简单，也能Ok