在以下链接的页面中:
http://item.taobao.com/auction/item_detail.jhtml?item_id=5c48bcc7eef93d6f7c50a9cf8b5e9d88&x_id=0db1
点击页面中的"宝贝详情"、"评价详情"、"成交记录"等标签,下面的内容就会跟着改变,请问这是如何实现的?在vs2005中有实现此效果的现成控件吗?各位能否给个实现的代码学学,谢谢!

解决方案 »

  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">
    body { font-size:14px; font-family:"宋体"}
    ol li { margin:8px}
    #con { font-size:12px; width:600px; margin:0 auto}
    #tags { height:23px; width:400px; margin:0; padding:0; margin-left:10px}
    #tags li { float:left; margin-right:1px; background:url(http://www.happyshow.org/sample/20061108/images/tagleft.gif) no-repeat left bottom; height:23px; list-style-type:none}
    #tags li a { text-decoration:none; float:left; background:url(http://www.happyshow.org/sample/20061108/images/tagright.gif) no-repeat right bottom; height:23px; padding:0px 10px; line-height:23px; color:#999}
    #tags li.emptyTag { width:4px; background:none}
    #tags li.selectTag { background-position: left top; position:relative; height:25px; margin-bottom:-2px}
    #tags li.selectTag a { background-position: right top; color:#000; height:25px; line-height:25px;}
    #tagContent { padding:1px; background-color:#fff; border:1px solid #aecbd4;width:100%;}
    .tagContent { background:url(http://www.happyshow.org/sample/20061108/images/bg.gif) repeat-x; height:350px;  padding:10px; color:#474747; width:576px; display:none}
    #tagContent div.selectTag{ display:block}
    .tagFrame{
     background:url(http://www.happyshow.org/sample/20061108/images/bg.gif) repeat-x;
    }
    </style>
    <SCRIPT LANGUAGE="JavaScript">
    <!--
    function getTab(flag) {  
      var elList, i;
      elList = document.getElementsByTagName("li");
      for (i = 0; i < elList.length; i++){
     elList[i].className ="";
      }
      elList[flag].className ="selectTag";
      elList[flag].blur();
    }
    function goto(flag){
    if("0"==flag){
    document.all.tabIframe.src="http://www.google.com";
    }else if("1"==flag){
    document.all.tabIframe.src="http://www.baidu.com";
    }else if("2"==flag){
    document.all.tabIframe.src="http://www.sogou.com";
    }
    getTab(parseInt(flag));
    }
    //-->
    </SCRIPT>
    </head>
    <body>
    <h1>标签示例</h1>
    <div id="con">
      <ul id="tags">
        <li><a href="javascript:void(0)" onclick="goto('0');">标签一</a></li>
    <li class="selectTag"><a href="javascript:void(0)" onclick="goto('1');">标签二</a></li>
    <li><a href="javascript:void(0)" onclick="goto('2');">自适应宽度的标签</a></li>
      </ul>
      <div id="tagContent">
       <!-- <div id="tagContent0" class="tagContent">第一个标签的内容</div>
    <div id="tagContent1" class="tagContent selectTag">第二个标签的内容</div>
    <div id="tagContent2" class="tagContent">第三个标签的内容</div> -->
    <iframe class="tagFrame" name="tabIframe" src="http://www.google.com" marginheight="8" marginwidth="8" frameborder="0"  width="100%" height="100%"></iframe>
      </div>
    </div>
    <script type="text/javascript">
    function selectTag(showContent,url,selfObj){
    // 操作标签
    var tag = document.getElementById("tags").getElementsByTagName("li");
    var taglength = tag.length;
    for(i=0; i<taglength; i++){
    tag[i].className = "";
    }
    selfObj.parentNode.className = "selectTag";

    }
    </script>
    </body>
    </html>
      

  2.   

    提供一个笨办法哦,放4个LinkButton和4个Panel.点击的同时更换LinkButton的图片和相应Panel的visible属性
      

  3.   

    <table border="0" cellspacing="0" cellpadding="0">
          <tr>
            <td style="width:84px; height:26px; background-image: url(../../Images/BtnImg_05.gif)" align="center" valign="bottom" class="Style_13px_ffffff"><a href="SalarySetting.aspx" class="Style_13px_666666"><span class="Style_13px_666666">工资等级</span></a></td>
            <td  style="width:5px; height:26px" align="center" valign="bottom"></td>
            <td style="width:84px; height:26px; background-image: url(../../Images/BtnImg_05.gif)" align="center" valign="bottom" class="Style_13px_ffffff"><a href="EvaSetting.aspx" class="Style_13px_666666"><span class="Style_13px_666666">评价等级</span></a></td>
             <td  style="width:5px; height:26px" align="center" valign="bottom"></td>
            <td style="width:84px; height:26px; background-image: url(../../Images/BtnImg_05.gif)" align="center" valign="bottom" class="Style_13px_ffffff"><a href="BonusSetting.aspx" class="Style_13px_666666"><span class="Style_13px_666666">奖金等级</span></a></td>
             <td  style="width:5px; height:26px" align="center" valign="bottom"></td>
            <td style="width:84px; height:26px; background-image: url(../../Images/BtnImg_05.gif)" align="center" valign="bottom" class="Style_13px_ffffff"><a href="Travelling.aspx" class="Style_13px_666666"><span class="Style_13px_666666">出差补贴</span></a></td>
             <td  style="width:5px; height:26px" align="center" valign="bottom"></td>
            <td style="width:84px; height:26px; background-image: url(../../Images/BtnImg_05.gif)" align="center" valign="bottom" class="Style_13px_ffffff"><a href="WageSetting.aspx" class="Style_13px_666666"><span class="Style_13px_666666">工资项目</span></a></td>
             <td  style="width:5px; height:26px" align="center" valign="bottom"></td>
            <td style="width:84px; height:26px; background-image: url(../../Images/BtnImg_03.gif)" align="center" valign="bottom" class="Style_13px_ffffff"><a href="InsureSetting.aspx" class="Style_13px_ffffff"><span class="Style_13px_ffffff">保险设置</span></a></td>
             <td  style="width:5px; height:26px" align="center" valign="bottom"></td>
            <td style="width:84px; height:26px; background-image: url(../../Images/BtnImg_05.gif)" align="center" valign="bottom" class="Style_13px_ffffff"><a href="FundsSetting.aspx" class="Style_13px_666666"><span class="Style_13px_666666">公积金设置</span></a></td>
          </tr>
        </table>希望对你有帮助,俺是这样做的