选项卡在大量的网站都有应用,虽然形式各有不同,但是索要达成的目的都是一样的,一般都是为了进行分类或者节省网页空间只用,算是一件利器,下面就是一个选项卡的代码实例,通用性很强,下面就和大家分享一下
Javascript 是一种由 Netscape 的 LiveScript 发展而来的原型化继承的基于对象的动态类型的区分大小写的客户端脚本语言,主要目的是为了解决服务器端语言,比如 Perl,遗留的速度问题,为客户提供更流畅的浏览效果。
选项卡在大量的网站都有应用,虽然形式各有不同,但是索要达成的目的都是一样的,一般都是为了进行分类或者节省网页空间只用,算是一件利器,下面就是一个选项卡的代码实例,通用性很强,下面就和大家分享一下。
代码实例如下:
- <!DOCTYPE html>
- <html>
- <head>
- <meta charset=" utf-8">
- <meta name="author" content="http://www.phperz.com/" />
- <title>
- js实现的可以通用的选项卡代码实例
- </title>
- <style type="text/CSS">
- body {text-align:center;} .tab1, .tab2 { width:350px; margin:0 5px; background:#CC9933;
- opacity:0.5; border-radius:5px 5px 5px 5px; box-shadow:#CCC 4px 4px 4px;
- text-align:left; float:left; display:inline; } .name { list-style:none;
- overflow:hidden; } .name li { width:90px; font:bold 16px/30px Verdana,
- Geneva, sans-serif; background:#669900; text-align:center; border-radius:5px
- 5px 5px; margin-right:5px; float:left; display:inline; cursor:pointer;
- } li.selected{background:#FF9900;} .content li { height:500px; display:none;
- }
- </style>
- <script type="text/javascript">
- /**
- * 事件处理通用函数
- */
- var EventUtil = {
- getEvent: function(event) {
- return event ? event: window.event;
- },
- getTarget: function(event) {
- return event.target || event.srcElement;
- },
- addHandler: function(element, type, handler) {
- if (element.addEventListener) {
- element.addEventListener(type, handler, false);
- } else if (element.attachEvent) {
- element.attachEvent("on" + type, handler);
- } else {
- element["on" + type] = handler;
- }
- }
- };
- /**
- * 选项卡通用函数
- */
- // 传入参数inClassName设定为绑定的选项卡类名,参数triggerType设定为触发切换的类型
- function tabSwitch(inClassName, triggerType) {
- //取得全部选项卡区域
- if (document.querySelectorAll) {
- var tabs = document.querySelectorAll("." + inClassName);
- } else {
- var divs = document.getElementsByTagName("div");
- var tabs = new Array();
- for (var k = 0,
- lenDiv = divs.length; k < lenDiv; k++) {
- if (divs[k].className.indexOf(inClassName) > -1) {
- tabs.push(divs[k]);
- }
- }
- }
- //为每个选项卡建立切换功能
- for (var j = 0,
- len = tabs.length; j < len; j++) {
- //获取标题和内容列表
- var tab = tabs[j];
- //使用私有作用域为每个选项卡建立切换
- (function() {
- var nameUl = tab.getElementsByTagName("ul")[0];
- var content = tab.getElementsByTagName("ul")[1];
- //初始化选项卡
- nameUl.getElementsByTagName("li")[0].className = "selected";
- content.getElementsByTagName("li")[0].style.display = "block";
- //添加事件委托
- EventUtil.addHandler(nameUl, triggerType,
- function(event) {
- //获取事件对象
- event = EventUtil.getEvent(event);
- var target = EventUtil.getTarget(event);
- //选项卡切换
- if (target.nodeName.toLowerCase() == "li") {
- //分别取得标题列表项和内容列表项
- var nameList = nameUl.getElementsByTagName("li");
- var contentList = content.getElementsByTagName("li");
- //标题添加selected类,并显示内容
- for (var i = 0,
- len = nameList.length; i < len; i++) {
- nameList[i].className = "";
- contentList.style.display = "none";
- if (nameList == target) {
- nameList.className = "selected";
- contentList.style.display = "block";
- }
- }
- }
- });
- })();
- }
- }
- window.onload = function() {
- //设置选项卡切换方式
- tabSwitch("tab1", "click");
- tabSwitch("tab2", "mouseover");
- }
- </script>
- </head>
- <body>
- <div class="tab1">
- <ul class="name">
- <li>
- 项目一
- </li>
- <li>
- 项目二
- </li>
- <li>
- 项目三
- </li>
- </ul>
- <ul class="content">
- <li>
- 类为
- <em>
- "tab1"
- </em>
- 项目一内容,通过
- <em>
- "click"
- </em>
- 触发
- </li>
- <li>
- 类为
- <em>
- "tab1"
- </em>
- 项目二内容,通过
- <em>
- "click"
- </em>
- 触发
- </li>
- <li>
- 类为
- <em>
- "tab1"
- </em>
- 项目三内容,通过
- <em>
- "click"
- </em>
- 触发
- </li>
- </ul>
- </div>
- <div class="tab1">
- <ul class="name">
- <li>
- 项目一
- </li>
- <li>
- 项目二
- </li>
- <li>
- 项目三
- </li>
- </ul>
- <ul class="content">
- <li>
- 类为
- <em>
- "tab1"
- </em>
- 项目一内容,通过
- <em>
- "click"
- </em>
- 触发
- </li>
- <li>
- 类为
- <em>
- "tab1"
- </em>
- 项目二内容,通过
- <em>
- "click"
- </em>
- 触发
- </li>
- <li>
- 类为
- <em>
- "tab1"
- </em>
- 项目三内容,通过
- <em>
- "click"
- </em>
- 触发
- </li>
- </ul>
- </div>
- <div class="tab2">
- <ul class="name">
- <li>
- 项目一
- </li>
- <li>
- 项目二
- </li>
- <li>
- 项目三
- </li>
- </ul>
- <ul class="content">
- <li>
- 类为
- <em>
- "tab2"
- </em>
- 项目一内容,通过
- <em>
- "mouseover"
- </em>
- 触发
- </li>
- <li>
- 类为
- <em>
- "tab2"
- </em>
- 项目二内容,通过
- <em>
- "mouseover"
- </em>
- 触发
- </li>
- <li>
- 类为
- <em>
- "tab2"
- </em>
- "项目三内容,通过
- <em>
- "mouseover"
- </em>
- 触发
- </li>
- </ul>
- </div>
- </body>
- </html>
以上代码实现了选项卡的功能,下面就简单介绍一下实现过程。
一. 实现原理:
看上去代码一大堆,其实原理非常的简单,咱们这里只简单的介绍一下原理,具体可以参阅代码注释依靠自己的思考。在默认状态选项卡的标题是显示的,并且第一个标题并赋予指定的样式类,选项卡内容只有第一个是显示的,其他的都出于隐藏状态,这样就实现了,默认状态下第一个被选中的效果。每一个选项卡标题都会被注册指定的事件处理函数,当进行点击或者划过操作时候,能够实现相应的切换,主要是通过遍历实现的,这里不多介绍了,参阅代码注释吧。
二. 代码注释:
以上内容介绍的还算比较详细,有代码,有注释,希望对大家学习 js 实现选项卡相关知识有所帮助。
来源: http://www.phperz.com/article/17/0220/267689.html