展开全部
tab切换：有多少种实现方式！
1，css+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"/>
<title>tab切换</title>
<meta name="keywords" content="" />
<meta name="Description" content="" />
<link rel="stylesheet" type="text/css" href="http://blog.163.com/fan_yishan/css/style.css"/>
<style type="text/css">
ul,li,div {padding:0;margin:0;}
ul li {float:left;width:100px;height:30px;line-height:30px;text-align:center;background-color:#fff;border:1px #bbb solid;border-bottom:none;}
ul li.fli {background-color:#ccc;color:red;}
ul {overflow:hidden;zoom:1;list-style-type:none;}
#tab_con {width:304px;height:200px;}
#tab_con div {width:304px;height:200px;display:none;border:1px #bbb solid;border-top:none;}
#tab_con div.fdiv {display:block;background-color:#ccc;}
</style>
</head>
<body>
<ul id="tab">
<li class="fli">tab1</li>
<li>tab2</li>
<li>tab3</li>
</ul>
<div id="tab_con">
<div class="fdiv">aaaa</div>
<div>bbbb</div>
<div>cccc</div>
</div>
JS代码：
<script type="text/javascript">
var tabs=document.getElementById("tab").getElementsByTagName("li");
var divs=document.getElementById("tab_con").getElementsByTagName("div");
for(var i=0;i<tabs.length;i++){
tabs[i].onclick=function(){change(this);}
}
function change(obj){
for(var i=0;i<tabs.length;i++)
{
if(tabs[i]==obj){
tabs[i].className="fli";
divs[i].className="fdiv";
}
else{
tabs[i].className="";
divs[i].className="";
}
}
}
</script>
2,jquery
<script type="text/javascript">
$(document).ready(function() {
//Default Action
$(".tab_content").hide(); //Hide all content
$("ul.tabs li:first").addClass("active").show(); //Activate first tab
$(".tab_content:first").show(); //Show first tab content
//On Click Event
$("ul.tabs li").click(function() {
$("ul.tabs li").removeClass("active"); //Remove any "active" class
$(this).addClass("active"); //Add "active" class to selected tab
$(".tab_content").hide(); //Hide all tab content
var activeTab = $(this).find("a").attr("href"); //Find the rel attribute value to identify the active tab + content
$(activeTab).fadeIn(); //Fade in the active content
return false;
});
});
</script>
--------------------------------分割线---------------------------------------
<div class="container">
<ul class="tabs">
<li class="active"><a href="#tab1">导航菜单</a></li>
<li><a href="#tab4">TAB标签</a></li>
</ul>
<div class="tab_container">
<div id="tab1" class="tab_content" style="display: block; ">
<h3><a href="http://www.freejs.net/article_daohangcaidan_13.html">jquery css多级下拉菜单</a></h3>
<p id="">多级菜单，理论上支持无限多的层级，文件结构非常简单的，具体的请看下面的内容</p>
</div>
<div id="tab4" class="tab_content" style="display: none; ">
<h2>各种tab标签选项卡</h2>
<h3><a href="http://www.freejs.net/article_tabbiaoqian_17.html">tab标签页面,ajax载入</a></h3>
<p> tab标签，jquery ajax载入数据库的内容</p>
</div>
</div>
</div>
本回答由网友推荐
已赞过
已踩过<
评论
收起
你对这个回答的评价是？
深圳市容大彩晶科技有限公司
2024-11-15 广告
广告机代理优选容大彩晶，深圳市容大彩晶科技有限公司自2007年成立伊始，一直专注于液晶商用显示产品的技术研发及产品服务。公司依托具有自主研发能力、创新高效的技术团队，打造出行业优质商用液晶显示设备。容大彩晶产品涵盖商用液晶显示、多媒体广告机...
点击进入详情页
本回答由深圳市容大彩晶科技有限公司提供
推荐律师服务：
若未解决您的问题，请您详细描述您的问题，通过百度律临进行免费专业咨询
