jquery tab切换怎么写。？？
网上找了一下全都是各种插件，代码一看都是两三百行的，谁能弄个简单点的，好不好看无所谓，关键是能说明一下原理...
网上找了一下全都是各种插件，代码一看都是两三百行的，谁能弄个简单点的，好不好看无所谓，关键是能说明一下原理
展开
3个回答
展开全部
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta charset="utf-8">
<title>垂直外边距合并</title>
<style>
h1{
display:inline-block;
width:80px;
}
.active{
border:1px solid green;
}
.content{
display:none;
}
.content.active{
display:block;
}
</style>
</head>
<body>
<h1 class="active">TAB1</h1>
<h1>TAB2</h1>
<h1>TAB3</h1>
<div class="con">
<div class="content active">
这里是一的内容
</div>
<div class="content">
这里是二的内容
</div>
<div class="content">
这里是三的内容
</div>
</div>
<script src="js/jquery-1.10.2.min.js"></script>
<script>
$('h1').click(function(){
var index = $(this).index();
$('.content').eq(index).show().addClass('active').siblings().removeClass('active').hide();
});
</script>
</body>
</html>
这位网友你好，其实tab页挺简单的，上面就是我简单写了一个。你可以自己复制运行一下，改一下jQuery的路径即可。讲一下原理，上面TAB1到3是切换按钮，下面是对应内容，它们的数量是相等的，当点击上面的按钮的时候获取一下它的index，也就是一个第几个按钮，它下面相应的内容就显示，其它的内容隐藏。页面刚加载的时候只有第一个内容是显示的，有一个控制显示的类active，在点击按钮的同时只要加上对应的样式的类即可，隐藏的时候去掉对应的样式。
已赞过
已踩过<
评论
收起
你对这个回答的评价是？
展开全部
使用Jquery:
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
ul{
list-style-type: none;
list-style-position: inside;
width: 600px;
margin: 20px auto;
padding: 0;
}
ul li{
float: left;
border: 1px solid #22ff22;
margin: 0px 3px;
padding: 10px;
background: #ddffdd;
border-top-left-radius: 8px;
border-top-right-radius: 8px;
border-bottom: none;
cursor: pointer;
}
.clearfix{
clear: both;
}
#container{
width: 600px;
margin: 0 auto;
height: 400px;
background: #aaaa55;
}
#container div{
padding: 20px;
}
</style>
<script src="jquery.min.js"></script>
<script>
function showTag(tagNo){
for(var i=1; i<=3; i++){
$("#div"+i).css("display","none");
$("#tag"+i).css("background","#ddffdd");
}
$("#tag"+tagNo).css("background","#11ff11");
$("#div"+tagNo).css("display","block");
}
</script>
</head>
<body>
<ul>
<li id="tag1" onmouseover="showTag(1)">标签1</li>
<li id="tag2" onmouseover="showTag(2)">标签2</li>
<li id="tag3" onmouseover="showTag(3)">标签3</li>
</ul>
<div class="clearfix"></div>
<div id="container">
<div id="div1">
这是第一个div的内容
hello world!
</div>
<div id="div2" style="display:none">
这是第二个div的内容
I am a div in 2
</div>
<div id="div3" style="display:none">
这是第三个div的内容
This is div 3
</div>
</div>
</body>
</html>
不用Jquery(原生JS):
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
ul{
list-style-type: none;
list-style-position: inside;
width: 600px;
margin: 20px auto;
padding: 0;
}
ul li{
float: left;
border: 1px solid #22ff22;
margin: 0px 3px;
padding: 10px;
background: #ddffdd;
border-top-left-radius: 8px;
border-top-right-radius: 8px;
border-bottom: none;
cursor: pointer;
}
.clearfix{
clear: both;
}
#container{
width: 600px;
margin: 0 auto;
height: 400px;
background: #aaaa55;
}
#container div{
padding: 20px;
}
</style>
<script>
function showTag(tagNo){
for(var i=1; i<=3; i++){
document.getElementById("div"+i).style.display="none";
document.getElementById("tag"+i).style.background="#ddffdd";
}
var tag=document.getElementById("tag"+tagNo);
tag.style.background="#11ff11";
var tagContent=document.getElementById("div"+tagNo);
tagContent.style.display="block";
}
</script>
</head>
<body>
<ul>
<li id="tag1" onmouseover="showTag(1)">标签1</li>
<li id="tag2" onmouseover="showTag(2)">标签2</li>
<li id="tag3" onmouseover="showTag(3)">标签3</li>
</ul>
<div class="clearfix"></div>
<div id="container">
<div id="div1">
这是第一个div的内容
hello world!
</div>
<div id="div2" style="display:none">
这是第二个div的内容
I am a div in 2
</div>
<div id="div3" style="display:none">
这是第三个div的内容
This is div 3
</div>
</div>
</body>
</html>
本回答被网友采纳
已赞过
已踩过<
评论
收起
你对这个回答的评价是？
展开全部
是点击切换吗？
div1，div2，div3默认显示一个，另两个隐藏
点击时候js里取到对应的显示，另外的隐藏
你说的简单的方法。。我这样讲能懂吗？
已赞过
已踩过<
评论
收起
你对这个回答的评价是？
更多回答（1）
推荐律师服务：
若未解决您的问题，请您详细描述您的问题，通过百度律临进行免费专业咨询
