大家帮我看看这个Jquery控制的Tab选项卡为什么会不起作用呢？谢谢！

<head><metahttp-equiv="Content-Type"content="text/html;charset=utf-8"/><linkhref="../... <head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<link href="../style/products_0.css" rel="stylesheet" type="text/css" />
<script type="text/javascript" src="../js/jquery.js"></script>
<script type="text/javascript" src="../js/tab1.js"></script>
</head>

<body>
<div class="menubox_0">
<div class="menubox">
<ul>
<li><a href="#" class="tab hover" title="contents_1">Specifications</a></li>
<li><a href="#" class="tab" title="contents_2">System Requirement </a></li>
<li><a href="#" class="tab" title="contents_3">Images</a></li>
</ul>
</div>
<div id="contents_1" class="contents_0">
<p> This DRM Converter is capable of converting audio and video file ... </p>
</div>
<div id="contents_2" class="contents_0">
<p> This DRM Converter is capable of converting audio and video file ... </p>
</div>
<div id="contents_3" class="contents_0">
<p> This DRM Converter is capable of converting audio and video file ... </p>
</div>
</div>
</body>
_____________________________________________________________
<! --JS程序：tab1.js -- >
$(document).ready(function(){

// When a link is clicked
$("a.tab").click(function () {

// switch all tabs off
$(".hover").removeClass("hover");

// switch this tab on
$(this).addClass("hover");

// slide all content up
$(".contents_0").slideUp();

// slide this content up
var content_show = $(this).attr("title");
$("#"+content_show).slideDown();

});

});
___________________________________________________________
<! -- CSS代码：products_0.css -->

.menubox_0{width:100%; margin-top:20px;}
.menubox { width:100%; height:28px; line-height:28px;}
.menubox ul { margin:0;}
.menubox li { float:left; display:block; cursor:pointer; width:135px; text-align:center; height:28px; line-height:28px; margin-left:1px; list-style:none; }
.menubox li a {background:url(../image/tabb.png) no-repeat; width:135px; display:block;}
.menubox li a.hover { padding:0; background: url(../image/tab_hover.png) no-repeat; height:28px; line-height:28px; color:#fff; margin-left:1px; _margin-left:0; } 展开

 我来答

2个回答

#热议# 为什么有人显老，有人显年轻？

魇者酌日
推荐于2016-08-06 · TA获得超过170个赞

知道答主

回答量：58

采纳率：0%

帮助的人：56.1万

我也去答题访问个人页

关注

展开全部

我刚才测试了一下，能够正常使用tab。
但是你应该在css里面加上
#contents_2,#contents_3{ display:none}
之外。
我不清楚你有没有声明DOCTYPE.
顺便说一下啊，jqueryui.com提供tabs.js插件，能够符合你百分之九十九的需求，你可以看一下。
以下是我的测试
<!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=utf-8" />
<script type="text/javascript" src="jquery1-5.1.js"></script>
<script type="text/javascript">
$(document).ready(function(){

// When a link is clicked
$("a.tab").click(function () {

// switch all tabs off
$(".hover").removeClass("hover");

// switch this tab on
$(this).addClass("hover");

// slide all content up
$(".contents_0").slideUp();

// slide this content up
var content_show = $(this).attr("title");
$("#"+content_show).slideDown();

});

});
</script>
<style type="text/css">
.menubox_0{width:100%; margin-top:20px;}
.menubox { width:100%; height:28px; line-height:28px;}
.menubox ul { margin:0;}
.menubox li { float:left; display:block; cursor:pointer; width:135px; text-align:center; height:28px; line-height:28px; margin-left:1px; list-style:none; }
.menubox li a {background:#eee; width:135px; display:block;}
.menubox li a.hover { padding:0; background:#ddd; height:28px; line-height:28px; color:#fff; margin-left:1px; _margin-left:0; }
#contents_2,#contents_3{ display:none}
</style>
</head>

<body>
<div class="menubox_0">
<div class="menubox">
<ul>
<li><a href="#" class="tab hover" title="contents_1">Specifications</a></li>
<li><a href="#" class="tab" title="contents_2">System Requirement </a></li>
<li><a href="#" class="tab" title="contents_3">Images</a></li>
</ul>
</div>
<div id="contents_1" class="contents_0">
<p> 1This DRM Converter is capable of converting audio and video file ... </p>
</div>
<div id="contents_2" class="contents_0">
<p> 2This DRM Converter is capable of converting audio and video file ... </p>
</div>
<div id="contents_3" class="contents_0">
<p> 3This DRM Converter is capable of converting audio and video file ... </p>
</div>
</div>
</body>
</html>

参考资料： http://www.enozoom.com

已赞过 已踩过<

评论收起

92elyi42i
2011-03-15 · 超过10用户采纳过TA的回答

知道答主

回答量：48

采纳率：0%

帮助的人：0

我也去答题访问个人页

关注

展开全部

each的解释会传递给回调函数元素索引和内容的，索引是0开始的，所以加1
$(document).ready(function(){
$("div[id^='tab']").each(function(i){
$(this).mouseover(function(){
alert(i+1);
});
});

});

已赞过 已踩过<

评论收起

推荐律师服务：若未解决您的问题，请您详细描述您的问题，通过百度律临进行免费专业咨询

大家帮我看看这个Jquery控制的Tab选项卡为什么会不起作用呢？谢谢！

其他类似问题

为你推荐：