一种网页效果，求助

德邦网站 http://www.deppon.com/主页的右面：货物追踪，网上下单。。那块的效果
点一下隐藏或显示 然后别的都隐藏这个
求javascript或jquery编写该效果的过程。。新手入门，无解

解决方案 »

  1.   

    这个就是他们的JS源码入门的话，首先你需要的是W3SCHOOL教程通读一遍，通读，不用特别细最最重要的是自己动手做，像这种网站的JS代码都是没有做混淆的，你直接用chrome的审查元素就可以看到，也可以down到本地自己调试。
      

  2.   


    看不太懂啊，不知道他html源码咋写的  
      

  3.   

    选项卡效果么。用jquery ui，就可以，里面有这功能。
    http://jqueryui.com/demos/
    欢迎光临我的博客
      

  4.   

    当点击时显隐，调用onclick事件，并结合js赋以变量，就可以实现。
    当离开时隐藏，主要是调用失去焦点事件，即：onblur=""
      

  5.   

    只可惜不能给你图片，你只能自己搞几张图片试试了。。记得导入jquery的js<%@ page language="java" pageEncoding="utf-8"%>
    <html>
    <head>
    <script src="js/jquery-ui-1.8.2.all/js/jquery-1.4.2.min.js"></script>
    <script>
    function select(ob)
    {
    var divs = document.getElementById("select").getElementsByTagName("div");
    var len = divs.length; for(var i = 0;i < len;i++)
    {
    if(divs[i] == ob)
    {
    $(divs[i+1]).slideToggle("fast");
    if(ob.getElementsByTagName("img")[1].src.indexOf("image/13.gif") == -1)
    {
    ob.getElementsByTagName("img")[1].src = "image/13.gif";
    }
    else
    {
    ob.getElementsByTagName("img")[1].src = "image/7.gif";
    }
    }
    }
    }
    </script>
    </head>
    <body>
    <div id="select" style="border:1px #CDCDCD solid;width:200px;">
    <div onclick="select(this)" style="height:23px;background-color:#F2F2F2;cursor:pointer;">
    <table>
    <tr>
    <td style="width:20px;"><img src="image/coolTeamIoc.gif"/></td>
    <td style="width:160px;"><font style="font-size:9pt;"><b>优计划123</b></font></td>
    <td><img src="image/13.gif"/></td>
    </tr>
    </table>
    </div>
    <div style="word-wrap:break-word;overflow:hidden;margin:5px 5px 5px 5px;">
    111111111111111112222222222222222222222222222222222<br/>
    11111111111111111<br/>
    11111111111111111<br/>
    </div>
    <div onclick="select(this)" style="background-color:#F2F2F2;border-top:1px #CDCDCD solid;cursor:pointer;">
    <table>
    <tr>
    <td style="width:20px;"><img src="image/coolTeamIoc.gif"/></td>
    <td style="width:160px;"><font style="font-size:9pt;"><b>优计划111111111111</b></font></td>
    <td><img src="image/7.gif"/></td>
    </tr>
    </table>
    </div>
    <div style="display:none;">
    22222222222222222<br/>
    22222222222222222<br/>
    22222222222222222<br/>
    </div>
    <div onclick="select(this)" style="background-color:#F2F2F2;border-top:1px #CDCDCD solid;cursor:pointer;">
    <table>
    <tr>
    <td style="width:20px;"><img src="image/coolTeamIoc.gif"/></td>
    <td style="width:160px;"><font style="font-size:9pt;"><b>优计划111111111111</b></font></td>
    <td><img src="image/7.gif"/></td>
    </tr>
    </table>
    </div>
    <div style="display:none;">
    33333333333333333<br/>
    33333333333333333<br/>
    33333333333333333<br/>
    </div>
    </div>
    </body>
    </html>