请问一段js!!急~~~~~~~~帮帮忙~~

   我需要一段JS 内容就像 http://www.dianping.com/shop/531204 这个里的 喜欢的菜和热门菜肴,点击热门菜肴里面的菜 喜欢的菜 就会增加,在点击同一个菜 喜欢的菜里面就会取消,可以点击多个菜,效果就像网站里面的那种.
  大家帮帮忙~~谢谢了~~~

解决方案 »

  1.   

    链接点击实现了，文本框尚未实现！
    L@_@K
    <!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>
      <title>dhtml.a.selectFavoriteToTextBox.html</title>
      <meta name="generator" content="editplus" />
      <meta name="author" content="[email protected]" />
      <meta name="keywords" content="" />
      <meta name="description" content="" />
      <style type="text/css">
    a {
    text-decoration: none;
    color: #6666CC;
    }
    .aUnSelected {
    color: #6666CC;
    }
    .aSelected {
    background-color: #6666CC;
    color: white;
    }
      </style>
     </head> <body>
    <div id="divContainer">
    喜欢的菜:&nbsp;<input type="text" id="txtFavorite" style="width: 400px;" /><br />
    热门菜肴:&nbsp;<a href="#">蛋煎糍粑</a>&nbsp;<a href="#">火锅</a>&nbsp;<a href="#">鸭肠</a>&nbsp;<a href="#">杜员外烤肉</a>&nbsp;<a href="#">香芋卷</a>
    </div>
    <script type="text/javascript">
    <!--
    $ = document.getElementById;function updateSelFoods(sFoodName) {
    var selFoods;
    if ($("txtFavorite").value != "")
    selFoods = $("txtFavorite").value.split(" ");
    else
    selFoods = [];
    var pos = -1; for (var i=0; i<selFoods.length; i++)
    {
    if (selFoods[i] == sFoodName)
    {
    pos = i;
    break;
    }
    }
    if (pos == -1)
    selFoods.push(sFoodName);
    else
    selFoods.splice(pos, 1); $("txtFavorite").value = selFoods.join(" ");
    }var aFoods = $("divContainer").getElementsByTagName("a");
    for (var i=0; i<aFoods.length; i++)
    {
    aFoods[i].className = "aUnSelected";
    aFoods[i].onclick = function() {
    this.className = this.className=="aUnSelected" ? "aSelected" : "aUnSelected";
    updateSelFoods(this.innerText);
    };
    }
    //-->
    </script>
     </body>
    </html>
      

  2.   


    <script type="text/javascript" charset="utf-8" src="http://files.cnblogs.com/shuicaituya/mootools.js"> </script>
    <input type="text" value="" maxlength="100" size="60" id="text"/>
    <div>
      <span>热门菜肴:</span>
      <span id='tags'>
        <a href="#">蛋煎糍粑</a>
        <a href="#">火锅</a>
        <a href="#">鸭肠</a>
        <a href="#">杜员外烤肉</a>
        <a href="#">香芋卷</a>
        <a href="#">鸡汤米线</a>
      </span>
    </div>
    <script>
    page = {
      addtag:function(text,inputTextObj){
        var inputTextArr = inputTextObj.value.trim() == ''?[]:inputTextObj.value.trim().split(',');
        inputTextObj.value = eval("inputTextArr." + (inputTextArr.contains(text) == true?"erase":"include") + "(text).join(',')");
      }
    }
    window.addEvent('domready',function(){
      $$('#tags a').each(function(aLink){
        aLink.addEvent('click',function(){
          page.addtag(this.get('text'),$('text'));
        });
      });
    });
    </script>还是蛮简单滴，你要试着自己写
      

  3.   

    刚没考虑css,现补上css效果，我直接贴全代码了，包括html,js,你直接用就可以了<script type="text/javascript" charset="utf-8" src="http://files.cnblogs.com/shuicaituya/mootools.js"> </script>
    <input type="text" value="" maxlength="100" size="60" id="text"/>
    <div>
      <span>热门菜肴:</span>
      <span id='tags'>
        <a href="#">蛋煎糍粑</a>
        <a href="#">火锅</a>
        <a href="#">鸭肠</a>
        <a href="#">杜员外烤肉</a>
        <a href="#">香芋卷</a>
        <a href="#">鸡汤米线</a>
      </span>
    </div>
    <script>
    page = {
      addtag:function(alinkObj,inputTextObj){
        var inputTextArr = inputTextObj.value.trim() == ''?[]:inputTextObj.value.trim().split(',');
        var isInclude = inputTextArr.contains(alinkObj.get('text')) == true;
        inputTextObj.value = eval("inputTextArr." + (isInclude == true?"erase":"include") + "(alinkObj.get('text')).join(',')");
        alinkObj.setStyles({color:(isInclude == true?'#0066cc':'#fff'),background:(isInclude == true?'#fff':'#6666cc')});
      }
    }
    $$('#tags a').each(function(aLink){
      aLink.addEvent('click',function(){page.addtag(this,$('text'));}).setStyles({'text-decoration':'none',color:'#6666cc'});
    });
    </script>