谢谢~~~~~~~~没有别的要说的~~~~还有就是刚才给您的短消息

解决方案 »

  1.   


    <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%;
              line-height: 20px;
              
              /*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;
          }
          img{
           border: none;
          }
        </style>
      </head>
      <body onload="">
        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="#"><img src='current.gif'/>选择信息类别</a></li>
                    <li class="title_item"><a class="title_item_text" href="#"><img src='cant.gif'/>选择信息子类别</a></li>
                    <li class="title_item"><a class="title_item_text" href="#"><img src='cant.gif'/>选择区域</a></li>
                    <li class="title_item"><a class="title_item_text" href="#"><img src='cant.gif'/>选择街道</a></li>
                    <li class="title_item"><a class="title_item_text" href="#"><img src='cant.gif'/>填写信息</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 IMAGE_CURRENT = 'http://p.blog.csdn.net/images/p_blog_csdn_net/sunxing007/EntryImages/20090929/current.gif';
        //未选中的选项卡图标
        var IMAGE_CANT = 'http://p.blog.csdn.net/images/p_blog_csdn_net/sunxing007/EntryImages/20090929/cant.gif';
        //已经做好选择了的选项卡图标
        var IMAGE_OK = 'http://p.blog.csdn.net/images/p_blog_csdn_net/sunxing007/EntryImages/20090929/ok.gif';
        function $(id){return document.getElementById(id)};
        var container = $('myUL');
        var items = container.getElementsByTagName('li');
        var links = container.getElementsByTagName('a');
        var contents = $('content').getElementsByTagName('div');
        var imgs = container.getElementsByTagName('img');
        
        
        //最主要的函数,参数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; 
              imgs[i].src = IMAGE_CURRENT;
            }
            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';
                imgs[i].src = IMAGE_OK;
              }
              else if(i>page){
                links[i].onclick = null;
                links[i].style.cursor = 'default';
                 imgs[i].src = IMAGE_CANT;
              }
            }
          }
          //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>