js高手请进，100分悬赏把两个JS合并一下。

<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'>
                
                
                
                <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>孙大师写的这个代码左边的５个标签的效果是开始一个都不能点击，１号标签显示正在被点击，当点击右边内容进入第二页时，1号标签显示可以点击，2号显示正在被点击，3，4，5号同样不能被点击。现在我想把它换成网上见过的一个wizard的效果，就是在这5个标签的位置设置5个DIV，其中1个显示4个隐藏，写一个JS使得点击右边进入下一页时左边第一个DIV隐藏第二个DIV显示，同时孙大师原先DIV里的5个li都是用字+图片显示的，我希望能达成全图片显示“未点击”，“正在点击”，“已点击”的效果，把焦点设在图片上，这个不难，图片的引用希望直接写在DIV里，最好不要写在JS里，当然5个DIV里每个li的图片都是不一样的，比如第一个DIV，第一个li是“正在点击”的图片，后面4个是“未点击”的图片，以此类推第二个DIV，第一个li是“已点击”，第二个是“正在点击”，3，4，5是“未点击”。以此类推。但当更换DIV的时候依然能保持当进入第二页时点击第一个li能返回第一页的这样一种效果。希望高手赐教，最好孙大师本人能看到。

貌似要用到jquery这个JS，实现wizard效果

孙大师写的这个代码上边的５个标签（“选择信息类别”“选择信息子类别”“选择区域”“选择街道”“填写信息”）的效果是开始一个都不能点击，１号标签显示正在被点击，当点击右边内容进入第二页时，1号标签显示可以点击，2号显示正在被点击，3，4，5号同样不能被点击。现在我想把它换成网上见过的一个wizard的效果，就是在这5个标签的DIV的位置设置5个DIV，每个DIV都包括这5个标签，其中1个DIV显示4个DIV隐藏，写一个JS使得点击右边进入下一页时左边第一个DIV隐藏第二个DIV显示，同时孙大师原先DIV里的5个li都是用字+图片显示的，我希望能达成全图片显示“未点击”，“正在点击”，“已点击”的效果，把焦点设在图片上，这个不难，图片的引用希望直接写在DIV里，最好不要写在JS里，当然5个DIV里每个li的图片都是不一样的，比如第一个DIV，第一个li是“正在点击”的图片，后面4个是“未点击”的图片，以此类推第二个DIV，第一个li是“已点击”，第二个是“正在点击”，3，4，5是“未点击”。以此类推。但当更换DIV的时候依然能保持当进入第二页时点击第一个li能返回第一页的这样一种效果。希望高手赐教，最好孙大师本人能看到。

我这几天有点忙，过节之后有一大堆bug.
而且我没有读明白你的意思。你能不能给一个sample?

是必须把外部的两个JS文件内容合并放到一个script中吗？不过在页面中建立两个script，然后分别指定其src属性值，就可以在页面引用两个外部JS文件中的函数了，这样可以不合并也可以用了

调试易

js高手请进，100分悬赏把两个JS合并一下。

解决方案 »