大家帮我看看这个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);
});
});
});
jquerytab选项卡(jquery实现选项卡)
如何用jQuery做选项卡界面1、首先如题，你的class必须是一一对应的，就是说按钮是的class是tab1，那么与之对应的div里面也必须是tab1，如果不符合这点，以下jq代码不会生效，第二点，我给你的ul加了个id，方便选取元素。2、使用步骤如下：jQuery给放到一个文件夹里面，方便我们待会引用这个jQuery，这...
tab选项卡在火狐里和360里没用 在IE里就有用,我是两个tab调用的一个js...
您的dom对象获取有问题啊。其实像这种略有有点复杂的操作，建议优先考虑引入jQuery框架，可以让您的代码更加优雅。下面是我实现的一组tab效果的js示例：function setTab(obj,type){ ("li").removeClass("on")(obj).toggleClass("on");if(type=="user1"){ ("#user1").show();("#user2")....
...增加新的TAB选项卡 改成只在一个TAB选项卡显示呢?
回答：那就是获取刷新当前tab呗。。。别用add用update不就行了。。。
js的tab选项卡点击切换或隐藏用jQuery也行!快!
\/\/需要引用jQuery包 ("#t1 a").click(function(){ \/\/获取id为t1的div下面的所有a标签 var id = $(this).attr("id").substr(5);\/\/截取当前点击的对象的id属性的第6位及之后的字符 ("#t1 a").attr("class","");\/\/使所有的a标签的class样式都为空 (this).attr("class","sel");...
为什么用vue不用jquery?
vue本身是操作数据的，例如说，做一个tab选项卡，如果是jquery，我们第一步会想，当前点的那个，从dom中jquery（“#name”）给他找出来，再运行function。等于是你遍历了两遍dom。效率是非常低的。其实你应该想想，如果你这个操作，只是去比较一下两个数组，是不是效率最起码提高10倍？？可是这样再vue...
vue能代替jquery吗(vue能不能替代thymeleaf)
不要用jquery那种dom的思路放到vue中去操作。vue本身是操作数据的，例如说，做一个tab选项卡，如果是jquery，我们第一步会想，当前点的那个，从dom中jquery（“#name”）给他找出来，再运行function。等于是你遍历了两遍dom。效率是非常低的。其实你应该想想，如果你这个操作，只是去比较一下两个数组，...
请高手帮我看看,这个jQuery实现的购物车表单金额统计出不来结果_百度知...
这里出现两个tdprice，，很可能导致循环错乱，建议修改方案，给tr一个id吧，按照你的产品id序号给，比如：<tr id="trprice_<% =id %>" class="trprice">... (".add").click(function(){ ...var trpriceObj = $(this).parents("trprice").attr("id");setTotal(trpriceObj);\/\/发送...
web前端学习分哪些阶段?
三、前端开发进阶1、运用jQuery、Bootstrap等框架开发杂乱的交互功能与作用；2、学习vue.js 等框架来完成一些大型的项目。感兴趣的话点击此处，免费学习一下想了解更多有关web前端学习的相关信息，推荐咨询【达内教育】。秉承“名师出高徒、高徒拿高薪”的教学理念，是达内公司确保教学质量的重要环节。作为...
.net页面上有三个RadioButton(服务器控件),控制下面三个层的隐藏和显 ...
function aa(){ var a=document.getElementById("<%=rdo1.ClientID%>").value;if(a=="true"){ document.getElementById("1").style.display="none";document.getElementById("2").style.display="block";document.getElementById("3").style.display="block";} } <asp:RedioButton ID...
前端开发和后端开发有什么区别
一、展示方式不同 1、前端开发主要做的是用户所能看到的前端展示界面。2、后端开发主要做的是逻辑功能等模块，是用户不可见的。二、所用技术不同 1、前端开发用到的技术包括但不限于html5、css3、javascript、jquery、Bootstrap、Node.js 、AngularJs等技术。2、后端开发 以java为例 主要用到的 是...
