<script type="text/javascript"> </script> 需求来自:http://topic.csdn.net/u/20090927/17/f495ae06-6e0b-454b-8c2c-64eecaa83ae0.html?seed=97620126&r=60140352#r_60140352 运行代码 <html> <head> <title>感激网</title> <style> body{ font-size: 10pt; } #c{ border: solid red 0px; background-color: #E4F0F8; height: 250px; width: 1000px; padding-top: 5px; } #title{ height: 28px; width: 100%; border: solid blue 0px; } #title ul{ margin: 0px 0px 0 0; list-style: none; height: 100%; } .title_item_selected{ display: block; float: left; height: 100%; margin: 0 10 0 0; padding: 0; background:url(http://bj.ganji.com/images/img_offset.gif) no-repeat 0 -245px; } .title_item{ display: block; float: left; height: 100%; margin: 0 10 0 0; padding: 0; /*background:url(http://bj.ganji.com/images/img_offset.gif) no-repeat 0 -245px;*/ } .title_item_text_selected{ border: solid red 0px; float: left; text-decoration:none; margin:0 0 0 6px; padding:10 6 0 0px; display: block; height: 100%; background:url(http://bj.ganji.com/images/img_offset.gif) no-repeat right -245px; cursor: default; } .title_item_text{ border: solid red 0px; float: left; text-decoration:none; margin:0 0 0 6px; padding:10 6 0 0px; display: block; height: 100%; /*background:url(http://bj.ganji.com/images/img_offset.gif) no-repeat right -245px;*/ cursor: default; } #content{ height: auto; width: 100%; border: solid blue 0px; } #content .tb{ margin: 0 6px 6px 6px; padding: 5px; border: solid red 0px; background-color: #fff; height: 100%; width: 100%; } #foot{ height: 40px; width: 100%; border: solid blue 0px; } </style> </head> <body οnlοad=""> author: <a href="http://blog.csdn.net/sunxing007">blog.csdn.net/sunxing007</a> <br><br> <div id='c'> <div id='title'> <ul id='myUL'> <li style="margin-left: 3px;" class="title_item_selected"><a class="title_item_text_selected" href="#">选择信息类别</a></li> <li class="title_item"><a class="title_item_text" href="#">选择信息子类别</a></li> <li class="title_item"><a class="title_item_text" href="#">选择区域</a></li> <li class="title_item"><a class="title_item_text" href="#">选择街道</a></li> <li class="title_item"><a class="title_item_text" href="#">填写信息</a></li> </ul> </div> <div id='content'> <div class='tb'> <!--下面的链接可以动态改变第二页的内容; 当点击房产的时候,动态的改变第二页的内容为房产相关的; 当点击汽车的时候,动态设置第二页内容为汽车相关--> <!--里面用到了后面定义的javascript函数 setContent(content, page)--> <!--特别需要注意的是双引号里面套着单引号,单引号里面又套着双引号,要注意用反斜杠转意--> <a href="javascript: setContent('<a href=/'javascript:go(2);/'>租房</a><br><a href=/'javascript:go(2);/'>二手</a><br><a href=/'javascript:go(0);/'>返回</a><br>', 1); go(1)">房产</a><br> <a href="javascript: setContent('<a href=/'javascript:go(2);/'>家用车</a><br><a href=/'javascript:go(2);/'>商务车</a><br><a href=/'javascript:go(0);/'>返回</a><br>', 1); go(1)">汽车</a><br> </div> <div class='tb'><a href="javascript: go(2);">租房</a><br>二手<br><a href="javascript: go(0);">返回</a> </div> <div class='tb'><a href="javascript: go(3);">浦东</a><br>浦西<br><a href="javascript: go(1);">返回</a> </div> <div class='tb'><a href="javascript: go(4);">张江高科</a><br>陆家嘴<br><a href="javascript: go(2);">返回</a> </div> <div class='tb'> 姓名:<input type="text" /></br> 年龄:<input type="text" /></br> 户籍:<input type="text" /></br> <a href="javascript: alert('your form will be submitted.');">提交</a> <a href="javascript: go(3);">返回</a> </div> </div> <div id='foot'></div> </div> <script> //var currentPage = 0; function $(id){return document.getElementById(id)}; var container = $('myUL'); var items = container.getElementsByTagName('li'); var links = container.getElementsByTagName('a'); var contents = $('content').getElementsByTagName('div'); //最主要的函数,参数page是要到达的页面。从0开始。 function go(page){ if(page<0 || page>4){ alert('invalid argument'); return; } for(var i=0; i<5; i++){ if(i==page){ items[i].className = 'title_item_selected'; links[i].className = 'title_item_text_selected' contents[i].style.display = ''; links[i].style.cursor = 'default'; links[i].onclick = null; } else{ items[i].className = 'title_item'; links[i].className = 'title_item_text'; contents[i].style.display = 'none'; if(i<page){ links[i].onclick = function(){ var n = getPageIndex(this); go(n); } links[i].style.cursor = 'hand'; } else if(i>page){ links[i].onclick = null; links[i].style.cursor = 'default'; } } } //currentPage = page; } //辅助函数 得到被点击的选项卡的索引 function getPageIndex(node){ for(var i=0; i<5; i++){ if(node==links[i]){ return i; } } } /** * 设置指定的选项卡的内容 * content是html字符串 * page是选项卡索引 0 <= page <= 4 ; * 比如:设置第二页的内容为:<a href='go(2);'>家用车</a><br><a href='go(2);'>商务车</a> * 则这样调用即可: setContent("<a href='go(2);'>家用车</a><br><a href='go(2);'>商务车</a>", 1); **/ function setContent(content, page){ if(page<0 || page>4){ alert('invalid arguments'); return; } contents[page].innerHTML = content; } //初始化,显示第一页 go(0); </script> </body> </html>