JS实现简单的tab切换选项卡效果

本文实例讲述了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程序设计有所帮助。

以上是 JS实现简单的tab切换选项卡效果 的全部内容, 来源链接: utcz.com/z/346794.html

回到顶部