菜鸟求助------想用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;"> 价 格: ￥ <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;">促 销: <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;">配 送: 广西梧州 至 南宁 快递: 8.00 EMS:10元</td>
</tr>
<tr>
<td width="532" height="28" style="text-align:left;">月销量: 20万件</td>
</tr>
<tr>
<td width="532" height="32"> </td>
</tr>
<tr>
<td width="532" height="30" style="text-align:left;" >尺 寸: S M L
</td>
</tr>
<tr >
<td width="532" height="30" style="text-align:left;">颜色分类: 蓝色 黑色 白色 红色</td>
</tr>
<tr>
<td width="532" height="30" style="text-align:left;">数 量: <asp:TextBox ID="TextBox1" Width="67px" runat="server"></asp:TextBox> 件
<asp:NumericUpDownExtender ID="NumericUpDownExtender1" runat="server" Minimum="1"
Maximum="5" TargetControlID="TextBox1" Width="80" >
</asp:NumericUpDownExtender>
</td>
</tr>
<tr>
<td width="532" height="55"> <a href="../Shoping/Order"> <img src="../../Content/images/1_r13_c4.jpg" width="164" height="33" /></a>
<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.最终的效果图
最佳答案
0
鼠标悬浮事件，传对应div的id做参数，方法里面先让他所有div隐藏，然后再用传的id获取对象
document.getElementById("id").style.display="block";
收获园豆：3
可以加我Q不？有些问题还是解决不了。QQ号：1961816463。
@青春纪念册: 加不上你的q，还得 回答问题，你加我的吧942561963
其他回答(2)
0
jquery ligerui里面就有选项卡功能的东西，去网上下一个就可以了
收获园豆：1
已经下载了，就是用jquery ui里的tab选项卡来做的。
0
好长的代码
收获园豆：1
第一次发博客，不知道怎么写才好
，多多指教。
