JavaScript效果之选项卡

拼了命学习js，想把学到的Javascript效果，可以记在博客里，在记录过程中，加深理解。

gogogo，第一个效果，选项卡。

一、选项卡效果的实现思路

选项卡效果的应用很广泛，几乎所有的网站都会用到选项卡，现在就来写选项卡。

选项卡的实现思路：

两个div，一个用来放在选项卡，一个用来放置每个选项卡内容。

首先，先把放置内容的div隐藏起来display:none，只保留一个显示display：block。

然后，通过点击选项卡，在该添加类的位置上添上属性类。

二、实现

我写的这个选项卡界面特“简洁”，只有说明选项卡该如何写。start~~~

截图：

function setTab(name,carsel,n)            //name为名字，carsel为游标，n为tab的数量
{for(var i =1;i<=n;i++){var oMenu = document.getElementById('one'+i);var oContent = document.getElementById('con_'+name+i);oMenu.className = i == carsel?"hover":"";oContent.style.display = i ==carsel?"block":"none";}
}

<div id="tab_menu"><ul><li id="one1" onclick="setTab('one',1,3)">女装</li><li id="one2" onclick="setTab('one',2,3)">男装</li><li id="one3" onclick="setTab('one',3,3)">童装</li></ul></div><div id="tab_content"><div id="con_one1">女装女装女装女装女装</div><div id="con_one2" style="display:none">男装男装男装男装男装</div><div id="con_one3" style="display:none">童装童装童装童装童装</div></div>

上面的Javascript函数，通过一个for循环，来判断用户点击的是哪一个选项卡，然后便获取该选项卡元素。这里的处理是：document.getElementById('one'+i);

获取到的会是id = one1/one2/on3，然后判断，i == carsel?"hover":""; 此时循环的 i 是否会等于游标值，会的话就添加一个hover类上去，改变被点击项的样式。

同样，下面的语句：oContent.style.display = i ==carsel?"block":"none";给当前被点击的选项，设置display为block，即显示出来。

三、完整代码

<!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" />
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<title></title>
<link href="" rel="stylesheet">
<style type="text/css">
.tab
{width: 600px;height: 400px;background: #CCC;margin: 0 auto;
}
#tab_menu
{width: 200px;height: 400px;float: left;background: #efefef;
}
#tab_content
{width: 400px;height: 400px;float: left;
}
#con_one1
{background: yellow;width: 400px;height: 400px;
}#con_one2
{background: green;width: 400px;height: 400px;
}
#con_one3
{background: blue;width: 400px;height: 400px;
}
.hover
{background: yellow;
}
</style>
<script type="text/javascript">
function setTab(name,carsel,n)            //carsel为游标，n为tab的数量
{for(var i =1;i<=n;i++){var oMenu = document.getElementById('one'+i);var oContent = document.getElementById('con_'+name+i);oMenu.className = i == carsel?"hover":"";oContent.style.display = i ==carsel?"block":"none";}
}
</script>
</head>
<body><div class="tab"><div id="tab_menu"><ul><li id="one1" onclick="setTab('one',1,3)">女装</li><li id="one2" onclick="setTab('one',2,3)">男装</li><li id="one3" onclick="setTab('one',3,3)">童装</li></ul></div><div id="tab_content"><div id="con_one1">女装女装女装女装女装</div><div id="con_one2" style="display:none">男装男装男装男装男装</div><div id="con_one3" style="display:none">童装童装童装童装童装</div></div></div>
</body>
</html>

View Code

四、

补充：

用一个参数来实现

/*------------------一个参数实现--------------------*/
function setTab(n)
{var aLi = document.getElementsByTagName('li');var oContent = document.getElementById('tab_content');var aDiv = oContent.getElementsByTagName('div');var i =0;for(i = 0;i<aLi.length; i++){if(n == i){aLi[i].className = "hover";aDiv[i].style.display = "block";}else{aLi[i].className = "";    aDiv[i].style.display = "none";}}
}

<div id="tab_menu">            <ul>                <!--<li id="one1" οnclick="setTab('one',1,3)">女装</li>                <li id="one2" οnclick="setTab('one',2,3)">男装</li>                <li id="one3" οnclick="setTab('one',3,3)">童装</li>-->                <li id="one1" οnclick="setTab(0)" class="hover">女装</li>                <li id="one2" οnclick="setTab(1)">男装</li>                <li id="one3" οnclick="setTab(2)">童装</li>

            </ul>        </div>

JavaScript效果之选项卡相关推荐

10个奇幻的HTML5和Javascript效果
导读:10款令人惊奇的HTML5和javascript效果.回到几年前,这些效果是根本不可能实现,只能用flash做,但是现在,已经很轻松的就可以实现了. Breathing Galaxies 使用键 ...
android 纯代码选项卡,纯javascript实现tab选项卡效果代码
提示:您可以先修改部分代码再运行买家中心卖家中心待处理订单(10) 待确定订单(本月购买额度17826.35元(返20元) 本年购买额度您的购买金额排第1名,奖励100元! 待处理订单(10) ...
Css JavaScript jquery 实现选项卡的制作
阅读目录 Css 源码源码解析 JavaScript 源码 JavaScript 源码解析 jQuery源码 jQuery 源码解析 Css 源码 <!DOCTYPE html> < ...
在html中active什么状态,javascript – 为什么html选项卡在设置为active时不显示其内容？...
显示一些标签. 当浏览器上的html页面加载并显示它的内容,因此它应显示第一个选项卡信息,因为它已设置为活动状态. 但是单击选项卡后,活动选项卡不显示其正在工作的内容. 我只是想在我在任何标签上设置活 ...
怎样写一个通用的JavaScript效果库！
JavaScript的动态效果最基本的是动态改变大小,移动位置,改变透明度,改变颜色等等.而其他一些比较炫的效果无非是对这些最基本效果的组合和运用. 现在网上已经有很多很不错的优秀Javascrip ...
怎样写一个通用的JavaScript效果库！(2/2)
来源:http://www.cnblogs.com/ashun/archive/2007/01/16/javascript-effect2.html 在上个随笔中贴出了效果库的整体框架,和一个简单的o ...
怎样写一个通用的JavaScript效果库！(1/2)(已更新链接)
JavaScript的动态效果最基本的是动态改变大小,移动位置,改变透明度,改变颜色等等. 而其他一些比较炫的效果无非是对这些最基本效果的组合和运用. 现在网上已经有很多很不错的优秀Javascri ...
如何写一个通用的JavaScript效果库
/**//****************************************************/ // 移动, 这里是move to 就是移动到 x,y 当然,大家也可以再扩展 ...
自动改变文字大小和颜色的javascript效果
<body bgcolor="#000000"> <div id="text" style="font-size:20px;&quo ...

JavaScript效果之选项卡

JavaScript效果之选项卡相关推荐

最新文章

热门文章