JavaScripttab选项卡插件实例代码资源-CSDN下载

30 浏览量 2021-01-19 15:25:49 上传评论收藏 76KB PDF 举报

资源推荐

资源详情

资源评论

JavaScript tab选项卡插件实例代码选项卡插件实例代码

今天，先从最简单的开始，将已有的一个Tab选项卡切换功能改写成javascript插件形式。

原生函数写法原生函数写法

将一个javascript方法改写为js插件最简单的方式就是将这个方法挂载到window全局对象下面

我们先来看看最原始的使用函数写法的代码：

tab.html

<!DOCTYPE html>

<html>

<head lang="en">

<meta charset="UTF-8">

<meta http-equiv="X-UA-Compatible" content="IE=edge">

<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">

<meta name="renderer" content="webkit">

<title>jquery_hjb_tab插件demo</title>

<link rel="stylesheet" href="h.css"/>

</head>

<body>

<div id="tab">

<div class="tabs">

<ul>

<li><a href="#">tab1</a></li>

<li><a href="#">tab2</a></li>

<li><a href="#">tab3</a></li>

<li><a href="#">tab4</a></li>

</ul>

</div>

<div class="tabCons">

<section>内容一</section>

<section>内容二</section>

<section>内容三</section>

<section>内容四</section>

</div>

</div>

<script>

window.onload = h_tab('tab');

function h_tab(tabId){

var oLinks = document.getElementById(tabId).getElementsByTagName("a");

var oCons = document.getElementById(tabId).getElementsByTagName("section");

for(var i = 0; i<oLinks.length; i++){

oLinks[i].index = i;

oLinks[i].onclick = function () {

for(var j =0; j<oLinks.length; j++){

oLinks[j].className="";

oCons[j].style.display = "none";

}

this.className="cur";

oCons[this.index].style.display ="block";

}

}

}

</script>

h.css

@charset "utf-8";

/*

//author:hjb2722404

//description:

//date:2016/2/18

*/

.tabs ul { width: 100%; list-style-type: none;}

.tabs ul li { width: 48%; display: inline-block; margin: 0; padding: 0;}

.tabs ul li a {border-bottom: 3px solid #cccccc; width: 100%; height: 100%; display: block; text-align: center; min-height: 40px; line-height: 40px; text-

decoration: none; font-family: "微软雅黑"; color: #a94442}

.tabs ul li a.cur { border-bottom: 3px solid #f26123;}

.tabCons section { display: none;}

.tabCons section:nth-child(1) { display: block;}

上面两份代码为基本代码，之后我们后一步步在这份代码的基础上进行改进。

本内容试读结束，登录后可阅读更多

下载后可阅读完整内容，剩余4页未读，立即下载

内容反馈

weixin_38500944

粉丝: 7

最新资源

资源上传下载、课程学习等过程中有任何疑问或建议，欢迎提出宝贵意见哦~我们会及时处理！点击此处反馈

feedback-tip