单击不同链接，出现不同内容（淘宝网）

http://item.taobao.com/item.htm?id=5131626732&cm_cat=50016768淘宝网的每个店铺，都有一个关与卖家的小导航条：宝贝详情，评价详情，成交记录，掌柜推荐，付款方式，售后服务，留言簿等，在宝贝详情里包含所有信息，单击评价详情只出现与他有关的，单击成交记录只出现成交记录，这是怎么都实现的啊？

解决方案 »

  1.   

    可以写个类似的例子吗?在这个上面写也行：
    <!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>
    <meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
    <title>无标题文档</title>
    <style type="text/css">
    <!--
    .nav {
    height: 30px;
    width: 700px;
    background-color: #00CCFF;
    }
     .q1 {
    font-size: 14px;
    line-height: 25px;
    font-weight: normal;
    color: #0000CC;
    height: 100px;
    width: 450px;
    border: 1px solid #990000;
    }
     .q2 {
    font-size: 14px;
    line-height: 25px;
    font-weight: normal;
    color: #0000CC;
    height: 100px;
    width: 450px;
    border: 1px solid #00FF00;
    }
    .q3 {
    font-size: 14px;
    line-height: 25px;
    font-weight: normal;
    color: #0000CC;
    height: 100px;
    width: 450px;
    border: 1px solid #9900FF;
    }
     .q4 {
    font-size: 14px;
    line-height: 25px;
    font-weight: normal;
    color: #0000CC;
    height: 100px;
    width: 450px;
    border: 1px solid #FFFF00;
    }
    #a1 {
    font-size: 14px;
    line-height: 25px;
    font-weight: normal;
    color: #0000CC;
    height: 100px;
    width: 450px;
    border: 1px solid #990000;
    }
    #a2 {
    font-size: 14px;
    line-height: 25px;
    font-weight: normal;
    color: #0000CC;
    height: 100px;
    width: 450px;
    border: 1px solid #00FF00;
    }
    #a3 {
    font-size: 14px;
    line-height: 25px;
    font-weight: normal;
    color: #0000CC;
    height: 100px;
    width: 450px;
    border: 1px solid #9900FF;
    }
    #a4 {
    font-size: 14px;
    line-height: 25px;
    font-weight: normal;
    color: #0000CC;
    height: 100px;
    width: 450px;
    border: 1px solid #FFFF00;
    }
    .nav a {
    color: #0000CC;
    text-decoration: none;
    }
    .nav a:hover{
    text-decoration: underline;
    }
    .nav li {
    font-size: 14px;
    line-height: 30px;
    color: #000000;
    display: block;
    float: left;
    width: 80px;
    height: 30px;
    text-align: center;
    }
    .content {
    width: 700px;
    }
    .nav ul {
    margin: 0px;
    padding: 0px;
    list-style-type: none;
    }-->
    </style></head><body>
    <div class="nav">
    <ul>
    <li ><a href="">首页</a></li>
    <li  ><a href="#a1" >我的地盘</a></li>
    <li ><a href="#a2" >我的家园</a></li>
    <li ><a href="#a3" >我的天下</a></li>
    <li><a href="#a4" >我的大家</a></li>
    </ul>
    </div>
    <div class="content">
    <div class="q1" id="t1" style="">我的地盘</div>
    <div class="q2" id="t2" style="">我的家园</div>
    <div class="q3" id="t3" style="">我的天下</div>
    <div class="q4" id="t4" style="">我的大家</div></div>
    </body>
    </html>