首页 新闻 会员 周边 捐助

菜鸟求助------想用Tabs做一个页面切换效果,出了点问题。急!急!急!麻烦能解决的帮解决一下,非常感谢

0
悬赏园豆:5 [已解决问题] 解决于 2013-06-19 11:26

想做一个类似这个网页(http://detail.tmall.com/item.htm?id=18379254918&spm=a1z10.1.w3-18405663147.6.cwolUM&bucket_id=19&scene=taobao_shop)这部分的切换效果。

1.这是静态页的代码和样式

静态页的代码:

<%@ Page Title="芊艺旗舰店--商品详情" Language="C#" MasterPageFile="~/Views/Master.Master" Inherits="System.Web.Mvc.ViewPage<dynamic>" %>

<%@ Register Assembly="AjaxControlToolkit" Namespace="AjaxControlToolkit" TagPrefix="asp" %>

<asp:Content ID="Content2" ContentPlaceHolderID="head" runat="server">
    <link href="../../Content/Skin/Search.css" rel="stylesheet" type="text/css" />
    <link href="../../Scripts/jquery-ui-1.10.3.custom.css" rel="stylesheet"     type="text/css" />
    <script src="../../Scripts/jquery-1.9.1.js" type="text/javascript"></script>
    <script src="../../Scripts/jquery-ui-1.10.3.custom.js" type="text/javascript">  </script>
<script type="text/javascript">
        $(function () {
            $("#tabs").tabs();
        })
</script>
</asp:Content>


<asp:Content ID="Content1" ContentPlaceHolderID="MainContent" runat="server">
    <div id="detailMain00">
  <table width="980px" border="0" align="center" >
  <tr align="center">
     <td width="992">
        <table width="100%" border="0" cellpadding="0" cellspacing="0">
          <tr>
             <td width="460" height="599"><table width="100%" height="599" border="0">
                      <tr>
                        <td width="460" height="461"><img src="../../Content/images/1_r3_c2.jpg" width="451" height="461" /></td>
                      </tr>
                      <tr>
                        <td height="83"><img src="../../Content/images/1_r16_c2.jpg" width="460" height="83" /></td>
                      </tr>
                      </table></td>
             <td height="599"><table width="100%" border="0">
                      <tr>
                        <td width="532" height="64"><h3><a href="#" target="_blank" style="color: #000000;"> 春款女装芊艺2013新款韩版修身 英伦风百褶A字连衣裙子</a></h3>                        </td>
                      </tr>
                      <tr>
                        <td width="532" height="38" style="text-align:left;"> 价&nbsp;&nbsp;格:&nbsp;&nbsp;&nbsp;&nbsp; ¥ <strong id="J_StrPrice" style=" color:#FB812E; font-size:20px;"><s> 268.00</s></strong></td>
                      </tr>
                      <tr>
                        <td width="532" height="38" style="text-align:left;">促&nbsp;&nbsp;销:&nbsp;&nbsp;&nbsp;&nbsp;<strong id="Strong1" style=" font-size:14px;">仅2个小时 ¥</strong><strong id="Strong2" style=" font-size:20px;color:#FB812E;">129.18</strong></td>
                      </tr>
                      <tr>
                        <td width="532" height="27" style="text-align:left;">配&nbsp;&nbsp;送:&nbsp;&nbsp;&nbsp;&nbsp;广西梧州 至 南宁 快递: 8.00 EMS:10元</td>
                      </tr>
                      <tr>
                        <td width="532" height="28" style="text-align:left;">月销量:&nbsp;&nbsp;&nbsp;&nbsp;20万件</td>
                      </tr>
                      <tr>
                        <td width="532" height="32">&nbsp;</td>
                      </tr>
                      
                      <tr>
                        <td width="532" height="30" style="text-align:left;" >尺&nbsp;&nbsp;寸:&nbsp;&nbsp;&nbsp;&nbsp;S M L
                      </td>
                      </tr>
                      <tr >
                        <td width="532" height="30" style="text-align:left;">颜色分类:&nbsp;&nbsp;蓝色 黑色 白色 红色</td>
                     </tr>
                      <tr>
                         <td width="532" height="30" style="text-align:left;">数&nbsp;&nbsp;量:&nbsp;&nbsp;&nbsp;&nbsp;<asp:TextBox ID="TextBox1" Width="67px" runat="server"></asp:TextBox> &nbsp;件
                         <asp:NumericUpDownExtender ID="NumericUpDownExtender1" runat="server" Minimum="1"
                            Maximum="5" TargetControlID="TextBox1"  Width="80" >
                         </asp:NumericUpDownExtender>
                         </td>
                      </tr>
                      <tr>
                        <td width="532" height="55">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<a href="../Shoping/Order"> <img src="../../Content/images/1_r13_c4.jpg" width="164" height="33" /></a>
                        &nbsp;&nbsp;&nbsp;<a href="../Shoping/Shop"> <img src="../../Content/images/1_r13_c7.jpg" width="166" height="33" /></a>
                        </td>
                      </tr>
                    </table>
             </td>
          </tr>
        </table>
     </td>
   </tr>
</table>
  <div id ="detailMain">
            <div id ="detailMain1">
                <div id="kefu">
                   <b style="height:30px; font-size:18px; color:green; font-weight:normal;">联系我们</b>
                   <ul>
                      <li><a href="#"><img src="../../Content/images/kefu.gif" /> 商城客服</a> </li>
                      <li><a href="#"><img src="../../Content/images/kefu.gif" /> 在线咨询</a> </li>
                      <li><a href="#"><img src="../../Content/images/kefu.gif" /> 和我联系</a> </li>
                      <li><a href="#"><img src="../../Content/images/kefu.gif" /> 给我留言</a> </li>
                   </ul>
                </div>
                <div id ="detailMain5">
                <div>
                    <div>
                        <div id="mainleft01">
                            <h3>宝贝分类</h3>
                            <p class ="fenlei"><a href ="#"><<新品发布</a></p>
                            <ul>
                                <li ><a href ="#">2013夏季新品 (一)</a></li>
                                <li ><a href ="#">2013春季新品NO.3</a></li>
                                <li ><a href ="#">2013春季新品NO.2</a></li>
                                <li ><a href ="#">2013春季新品NO.1</a></li>
                                <li ><a href ="#">2012年12月 新品</a></li>
                                <li ><a href ="#">2012年11月 新品</a></li>
                                <li ><a href ="#">2012年10月 新品</a></li>
                                <li ><a href ="#">秋冬专区</a></li>
                                <li ><a href ="#">春夏专区</a></li>
                            </ul>
                            <p class ="fenlei"><a href ="#"><<海量新品</a></p>
                            <p class ="fenlei"><a href ="#"><<淑女上装</a></p>
                            <ul>
                                <li ><a href ="#">上衣/打底衫</a></li>
                                <li ><a href ="#">毛呢</a></li>
                                <li ><a href ="#">外套</a></li>
                                <li ><a href ="#">风衣</a></li>
                            </ul>
                            <p class ="fenlei"><a href ="#"><<裙子精选</a></p>
                            <p class ="fenlei"><a href ="#"><<百搭裤子</a></p>
                            <p class ="fenlei"><a href ="#"><<手机淘宝</a></p>
                            <ul>
                                <li ><a href ="#">热卖排行</a></li>
                                <li ><a href ="#">新品上架</a></li>
                            </ul>
                        </div>

                    </div>
                </div>
                </div>
                
            </div>

 

//这是使用tab的代码段
            <div id="tabs">
               <ul>
                  <li><a href="#tabs-1">宝贝详情</a></li>
                  <li><a href="#tabs-2">商品评价(45)</a></li>
                  <li><a href="#tabs-3">成交记录(56)</a></li>
               </ul>
            <div id="tabs-1">
            <div id ="detailMain2">
               <div id="detail">
                   <div class="detail01">产品参数</div>
                   <div id="detail02">
                      <ul>
                         <li>主图来源:自主实拍图</li>
                         <li>货号:C2018</li>
                         <li>风格:街头</li>
                      </ul>
                      <ul>
                         <li>袖型:堆堆袖</li>
                         <li>
                           腰型:<em style="color:White; background-color:#AF9888; text-align:left; font-family:宋体; font-style:normal;"> 中腰</em>
                         </li>
                         <li>一门襟:套头</li>
                      </ul>
                      <ul>
                         <li>裙型:百褶裙</li>
                         <li>图案:条纹</li>
                         <li>流行元素/工艺:拼贴/拼接</li>
                      </ul>
                      <ul>
                         <li>品牌:芊艺</li>
                         <li>材质:其他</li>
                         <li>主成分含量:91%-95%</li>
                      </ul>
                      <ul>
                        <li>主材质:聚酯纤维</li>
                        <li>适用人群:25-29岁</li>
                        <li>年份季节:2013夏季</li>
                      </ul>
                      <ul>
                         <li>颜色分类:咖啡色</li>
                         <li>尺码:(亲,太火爆啦!)【正品保证】</li>
                         <li></li>
                     </ul>
                  </div>                
               </div>
               <div id="detailMain3">
                  <img src="../../Content/images/S2.jpg" alt="" />
                  <img src="../../Content/images/S3.jpg" alt="" />
                  <img src="../../Content/images/S5.jpg" alt=""/>
               </div>
               <table  id="detailMain4">
                  <tr>
                    <td style="font-size:18px; float:left;">商品评价:</td>
                  </tr>
                  <tr >
                     <td style="width:500px ; float:left;">hjsdgfhsdfjlo</td>
                     <td style="float:left;">dfhdj</td>
                  </tr>
                  <tr>
                     <td style="width:500px;float:left;">hjsdgfhsdfjlo</td>
                     <td style="float:left;">dfhdj</td>
                  </tr>
                  <tr>
                     <td style="width:500px;float:left;">hjsdgfhsdfjlo</td>
                     <td style="float:left;">dfhdj</td>
                  </tr>
                  <tr>
                     <td style="width:500px;float:left;">hjsdgfhsdfjlo</td>
                     <td style="float:left;">dfhdj</td>
                  </tr>
                  <tr>
                     <td style="width:500px;float:left;">hjsdgfhsdfjlo</td>
                     <td style="float:left;">dfhdj</td>
                  </tr>
                  <tr>
                    <td style="width:500px;float:left;">hjsdgfhsdfjlo</td>
                    <td style="float:left;">dfhdj</td>
                  </tr>
                  <tr>
                     <td style="width:500px;float:left;">hjsdgfhsdfjlo</td>
                     <td style="float:left;">dfhdj</td>
                  </tr>
            </table>
            </div>
            </div>
              <div id="tabs-2">
               <table   style="  height:100%; width:75%; background-color:#D8E7FA; line-height:24px; float:right;">
                  <tr>
                    <td style="font-size:18px; float:left;">商品评价:</td>
                  </tr>
                  <tr >
                     <td style="width:500px ; float:left;">hjsdgfhsdfjlo</td>
                     <td style="float:left;">dfhdj</td>
                  </tr>
                  <tr>
                     <td style="width:500px;float:left;">hjsdgfhsdfjlo</td>
                     <td style="float:left;">dfhdj</td>
                  </tr>
                  <tr>
                     <td style="width:500px;float:left;">hjsdgfhsdfjlo</td>
                     <td style="float:left;">dfhdj</td>
                  </tr>
                  <tr>
                     <td style="width:500px;float:left;">hjsdgfhsdfjlo</td>
                     <td style="float:left;">dfhdj</td>
                  </tr>
                  <tr>
                     <td style="width:500px;float:left;">hjsdgfhsdfjlo</td>
                     <td style="float:left;">dfhdj</td>
                  </tr>
                  <tr>
                    <td style="width:500px;float:left;">hjsdgfhsdfjlo</td>
                    <td style="float:left;">dfhdj</td>
                  </tr>
                  <tr>
                     <td style="width:500px;float:left;">hjsdgfhsdfjlo</td>
                     <td style="float:left;">dfhdj</td>
                  </tr>
            </table>
               </div>
        </div>
</div>

</asp:Content>

样式:

/*商品详细介绍*/
#detail
{
    height:100%; width:94%; margin :auto; background-color:#F4F3EF;color:#909090;border:solid #909090 1px;
    margin-right:80px;
}
.detail01
{
   height:30px; width:100%; line-height:30px; text-align:left; font-size:18px; padding-left:18px;
}
#detail02
{
     height:100%; width:100%; line-height:30px; text-align:center; margin:10px auto;
}
#detail02 ul
{
    height:30px; width:96%;  text-align:left; margin:auto;
}
#detail02 li
{
    height:100%; width:230px; margin:0px; float:left;
    line-height:30px;  margin-left:-30px; margin-right:30px;
}
#kefu
{
    border:solid #B6DAAC 1px; height:100%; width:100%;text-align:center; margin:auto;color:#909090; background-color:#F7FFF5;
}
#kefu ul
{
    height :82%; width:78%; margin:auto; margin-top:8px; text-align:left;
    font-size:12px; line-height:30px;
}
#kefu li
{
    height :30px; width:100%; margin:4px auto; line-height:30px; text-align:center; margin-left:-16px;
    
}
#kefu a
{
    color:#909090;
}

#detailMain00
{
    border:solid blue 1px; height :100%; width:100%; margin:auto;
}
#detailMain
{
    border:solid red 1px ; height:100%; width:100%;
}
#detailMain1
{
    border:solid green 1px ; height:100%; width:200px; float:left; margin-left:24px;
}
#detailMain2
{
    height:100%; width:78%; margin :auto; margin-left:260px;
}
#detailMain3
{
     height:100%; width:100%;
}
#detailMain4
{
    height:100%; width:94%; background-color:#D8E7FA; line-height:24px;
}
#detailMain5
{
   width:100%; height:800px; margin-top:10px;
}

#mainleft01:hover{ border :#FF8F59 solid 1px;}
#mainleft01{ height :650px; width:200px; border:#DDD solid 1px;}
#mainleft01 h3{ height :20px; width:200px; font-size:12px; color :White ; font-weight:lighter; text-indent:10px;line-height:20px; margin :0px; background-color:#E1C0A3;}
#mainleft01 .fenlei{ text-indent:30px;}
#mainleft01 .fenlei a{ color :#E1C0A3;font-size:12px; height :30px ; line-height :20px ; }
#mainleft01 ul{ width:200px; margin :0px; padding :0px; }
#mainleft01 ul li{ height :25px; width :200px; line-height:25px; text-indent:30px; list-style :none;border-bottom: 1px dotted #DDD;   }
#mainleft01 ul li a{text-decoration:none; color:#9D9D9D;}
#mainleft01 ul li a:hover{ color :Black ;}

2.最终的效果图

 

青春纪念册的主页 青春纪念册 | 初学一级 | 园豆:186
提问于:2013-06-18 09:13
< >
分享
最佳答案
0

鼠标悬浮事件,传对应div的id做参数,方法里面先让他所有div隐藏,然后再用传的id获取对象

document.getElementById("id").style.display="block";

收获园豆:3
没发光的钻石 | 初学一级 |园豆:132 | 2013-06-19 09:08

可以加我Q不?有些问题还是解决不了。QQ号:1961816463。

青春纪念册 | 园豆:186 (初学一级) | 2013-06-19 11:25

@青春纪念册: 加不上你的q,还得 回答问题,你加我的吧942561963 

没发光的钻石 | 园豆:132 (初学一级) | 2013-06-19 12:15
其他回答(2)
0

jquery ligerui里面就有选项卡功能的东西,去网上下一个就可以了

收获园豆:1
Mr.落叶 | 园豆:174 (初学一级) | 2013-06-18 11:25

已经下载了,就是用jquery ui里的tab选项卡来做的。

支持(0) 反对(0) 青春纪念册 | 园豆:186 (初学一级) | 2013-06-19 09:55
0

好长的代码

收获园豆:1
jerry-Tom | 园豆:4077 (老鸟四级) | 2013-06-18 15:14

第一次发博客,不知道怎么写才好,多多指教。

支持(0) 反对(0) 青春纪念册 | 园豆:186 (初学一级) | 2013-06-19 09:55
清除回答草稿
   您需要登录以后才能回答,未注册用户请先注册