大家帮我看看这个Jquery控制的Tab选项卡为什么会不起作用呢？谢谢！
<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; }
但是你应该在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>
$(document).ready(function(){
$("div[id^='tab']").each(function(i){
$(this).mouseover(function(){
alert(i+1);
});
});
});
