JS实现简单的tab切换选项卡效果
时间：2020-12-25 12:28:49|栏目：JavaScript代码|点击： 次
本文实例讲述了JS实现简单的tab切换选项卡效果。分享给大家供大家参考，具体如下：
<!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">
<meta charset="UTF-8">
<head>
<title>JS自制简单使用的选项卡</title>
<style type="text/css">
*{ margin:0px; padding:0px;}
#tabWarp{ width:400px; height:300px; border:1px solid #ccc; margin:10px auto;}
#tabMenu{ width:400px; height:25px; overflow:hidden; border-bottom:1px solid #ccc; margin-top:5px;}
#tabMenu ul li{ width:80px; float:left; list-style:none; font-size:12px; line-height:25px; height:25px; text-align:center; color:#0066CC; cursor:pointer; border-left:1px solid #ccc; border-right:1px solid #ccc; border-top:1px solid #ccc; margin:0px 5px;}
#tabMenu ul li.curent{ font-size:13px; background:#FBF5E1; font-weight:bold; color:#FF6600;}
#tabContent{ width:390px; height:360px; padding:5px; font-size:12px;}
#tabContent .hide{ display:none;}
</style>
</head>
<body>
<h1 id="what"></h1>
<div id="tabWarp">
<div id="tabMenu">
<ul>
<li class="curent">中餐</li>
<li>西餐</li>
<li>亚洲菜</li>
<li>河南菜</li>
</ul>
</div>
<div id="tabContent">
<div>
<p>中餐的内容</p>
</div>
<div class="hide">
<p>西餐的内容</p>
</div>
<div class="hide">
<p>亚洲菜的内容</p>
</div>
<div class="hide">
<p>河南菜的内容</p>
</div>
</div>
</div>
<script>
function fgTab(tabNav,tabBody){
var tabMenu=document.getElementById(tabNav);
var tabTitle=tabMenu.getElementsByTagName('li');
var tabContent=document.getElementById(tabBody);
var tabBody=tabContent.getElementsByTagName('div');
function switchTab(i){
tabTitle[i].onmouseover=function(){
for(j=0; j<tabTitle.length; j++){
if(i==j){
tabTitle[j].className='curent';
tabBody[j].style.display="block";
}else{
tabTitle[j].className='';
tabBody[j].style.display="none";
}
}
//document.getElementById('what').innerHTML = i+'<br/>'+out();
}
}
for( i=0; i<tabTitle.length; i++){
switchTab(i);
}
}
function out(){
return i + '<br/>'+j;
}
</script>
<script>
fgTab('tabMenu','tabContent');
</script>
</body>
</html>
运行效果图如下：
更多关于JavaScript相关内容感兴趣的读者可查看本站专题：《JavaScript切换特效与技巧总结》、《JavaScript遍历算法与技巧总结》、《JavaScript查找算法技巧总结》、《JavaScript动画特效与技巧汇总》、《JavaScript错误与调试技巧总结》、《JavaScript数据结构与算法技巧总结》及《JavaScript数学运算用法总结》
希望本文所述对大家JavaScript程序设计有所帮助。
