求一段代码，第一行是大标题，点击相应标题，下面出现小标题，都是横向的。

求一段代码，第一行是大标题，点击相应标题，下面出现小标题，都是横向的。
最好用js实现。可以div嵌套。
唉，对网页布局比较头疼。
可以用的话。100分。

解决方案 »

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

http://www.xuyan725.cn/leonfile/test.rar
刚用jquery给你写了个
学习下www.tw1234.cn
搜索 js折叠菜单或者 js二级菜单
这种东西,,去google打一下,,比这里找来的快
你说的是类似tabstrip的东西吧？
临时用jquery写的，比较粗糙，希望能帮到你！<html>
    <head>
<title>Test</title>
    </head>
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript">
    $(document).ready(function(){
        $("#sub1").hide();
        $("#sub2").hide();
        $("#sub3").hide();
$("#main1").click(function(){
    if(!$("#sub1").is(':visible')){
allClose();
$("#sub1").slideDown();
    }else{
$("#sub1").slideUp("fast");
    }
});
$("#main2").click(function(){
    if(!$("#sub2").is(':visible')){
allClose();
$("#sub2").slideDown();
    }else{
$("#sub2").slideUp("fast");
    }
});
$("#main3").click(function(){
    if(!$("#sub3").is(':visible')){
allClose();
$("#sub3").slideDown();
    }else{
$("#sub3").slideUp("fast");
    }
}); function allClose()
{
    if($("#sub1").is(':visible')){
$("#sub1").hide();
    }
    if($("#sub2").is(':visible')){
$("#sub2").hide();
    }
    if($("#sub3").is(':visible')){
$("#sub3").hide();
    }
}
    });
</script>
    <body>
<div id="main">
    <table cellpadding="10" height="20">
<tr>
    <td id="main1" width="35" align="center"><b>首页</b></td>
    <td id="main2" width="35" align="center"><b>空间</b></td>
    <td id="main3" width="35" align="center"><b>新闻</b></td>
</tr>
    </table>
</div>
<div id="sub1">
    <table cellpadding="10" height="20">
<tr>
    <td>首页一</td>
    <td>首页二</td>
    <td>首页三</td>
</tr>
    </table>
</div>
<div id="sub2">
    <table cellpadding="10" height="20">
<tr>
    <td>空间一</td>
    <td>空间二</td>
    <td>空间三</td>
</tr>
    </table>
</div>
<div id="sub3">
    <table cellpadding="10" height="20">
<tr>
    <td>新闻一</td>
    <td>新闻二</td>
    <td>新闻三</td>
</tr>
    </table>
</div>
    </body>
</html>
<!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>Untitled Document</title>
<link rel="stylesheet" href="emx_nav_left.css" type="text/css" />
<script type="text/javascript">

</script>
</head>
<body onmousemove="closesubnav(event);">
<div class="skipLinks">skip to: <a href="#content">page content</a> | <a href="#pageNav">links on this page</a> | <a href="#globalNav">site navigation</a> | <a href="#siteInfo">footer (site information)</a> </div>
<div id="masthead">
  <h1 id="siteName"> </h1>
  <div id="globalNav"> <img alt="" src="gblnav_left.gif" height="32" width="4" id="gnl" /> <img alt="" src="glbnav_right.gif" height="32" width="4" id="gnr" />
    <div id="globalLink"> <a href="#" id="gl1" class="glink" onmouseover="ehandler(event,menuitem1);">global link</a><a href="#" id="gl2" class="glink" onmouseover="ehandler(event,menuitem2);">global link</a><a href="#" id="gl3" class="glink" onmouseover="ehandler(event,menuitem3);">global link</a><a href="#" id="gl4" class="glink" onmouseover="ehandler(event,menuitem4);">global link</a><a href="#" id="gl5" class="glink" onmouseover="ehandler(event,menuitem5);">global link</a><a href="#" id="gl6" class="glink" onmouseover="ehandler(event,menuitem6);">global link</a><a href="#" id="gl7" class="glink" onmouseover="ehandler(event,menuitem7);">global link</a> </div>
    
    <form id="search" action="">
      <input name="searchFor" type="text" size="10" />
      <a href="">search</a>
    </form>
  </div>
  
  <div id="subglobal1" class="subglobalNav"> <a href="#">subglobal1 link</a> | <a href="#">subglobal1 link</a> | <a href="#">subglobal1 link</a> | <a href="#">subglobal1 link</a> | <a href="#">subglobal1 link</a> | <a href="#">subglobal1 link</a> | <a href="#">subglobal1 link</a> </div>
  <div id="subglobal2" class="subglobalNav"> <a href="#">subglobal2 link</a> | <a href="#">subglobal2 link</a> | <a href="#">subglobal2 link</a> | <a href="#">subglobal2 link</a> | <a href="#">subglobal2 link</a> | <a href="#">subglobal2 link</a> | <a href="#">subglobal2 link</a> </div>
  <div id="subglobal3" class="subglobalNav"> <a href="#">subglobal3 link</a> | <a href="#">subglobal3 link</a> | <a href="#">subglobal3 link</a> | <a href="#">subglobal3 link</a> | <a href="#">subglobal3 link</a> | <a href="#">subglobal3 link</a> | <a href="#">subglobal3 link</a> </div>
  <div id="subglobal4" class="subglobalNav"> <a href="#">subglobal4 link</a> | <a href="#">subglobal4 link</a> | <a href="#">subglobal4 link</a> | <a href="#">subglobal4 link</a> | <a href="#">subglobal4 link</a> | <a href="#">subglobal4 link</a> | <a href="#">subglobal4 link</a> </div>
  <div id="subglobal5" class="subglobalNav"> <a href="#">subglobal5 link</a> | <a href="#">subglobal5 link</a> | <a href="#">subglobal5 link</a> | <a href="#">subglobal5 link</a> | <a href="#">subglobal5 link</a> | <a href="#">subglobal5 link</a> | <a href="#">subglobal5 link</a> </div>
  <div id="subglobal6" class="subglobalNav"> <a href="#">subglobal6 link</a> | <a href="#">subglobal6 link</a> | <a href="#">subglobal6 link</a> | <a href="#">subglobal6 link</a> | <a href="#">subglobal6 link</a> | <a href="#">subglobal6 link</a> | <a href="#">subglobal6 link</a> </div>
  <div id="subglobal7" class="subglobalNav"> <a href="#">subglobal7 link</a> | <a href="#">subglobal7 link</a> | <a href="#">subglobal7 link</a> | <a href="#">subglobal7 link</a> | <a href="#">subglobal7 link</a> | <a href="#">subglobal7 link</a> | <a href="#">subglobal7 link</a> </div>
  <div id="subglobal8" class="subglobalNav"> <a href="#">subglobal8 link</a> | <a href="#">subglobal8 link</a> | <a href="#">subglobal8 link</a> | <a href="#">subglobal8 link</a> | <a href="#">subglobal8 link</a> | <a href="#">subglobal8 link</a> | <a href="#">subglobal8 link</a> </div>
</div>
<br />
<script type="text/javascript">
    
    </script>
</body>
</html>.subglobalNav{
position: absolute;
top: 84px;
left: 0px;
/*width: 100%;*/
min-width: 640px;
height: 20px;
padding: 0px 0px 0px 10px;
visibility: hidden;
color: #ffffff;
}.subglobalNav a:link, .subglobalNav a:visited {
font-size: 80%;
color: #ffffff;
}.subglobalNav a:hover{
color: #cccccc;
}