js选项卡的N种写法
摘要： 前端开发好用的动画插件 firefox 前端开发插件 浏览器前端开发插件 html 代码片段 <!DOCTYPE html> <html> <head> <meta charset=”utf-8″ /> ……
| 前端开发好用的动画插件 |
| firefox 前端开发插件 |
| 浏览器前端开发插件 |
html 代码片段
<!DOCTYPE html>
<html>
<head>
<meta charset=”utf-8″ />
<style>
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
.js-tab {
width: 300px;
}
.js-tab li {
float: left;
width: 100px;
height: 25px;
border: #000 solid 1px;
color: #000;
background-color: #fff;
list-style: none;
cursor: pointer;
}
.js-tab li.js-click {
color: #fff;
background-color: #f00;
}
.js-div {
border: #000 solid 1px;
width: 300px;
height: 100px;
}
.js-div div {
height: 100%;
}
.display {
display: none;
}
.clearfix:after {
content: ‘\200B’;
height: 0;
display: block;
clear: both;
}
</style>
</head>
<body>
<ul class=”js-tab clearfix” id=”js-tab”>
<li class=”js-click” onclick=”xuanxiangka(0)”>选项卡1</li>
<li onclick=”xuanxiangka(1)”>选项卡2</li>
<li onclick=”xuanxiangka(2)”>选项卡3</li>
</ul>
<div class=”js-div” id=”js-div”>
<div>内容1</div>
<div class=”display”>内容2</div>
<div class=”display”>内容3</div>
</div>
<script>
var tab = document
.getElementById(‘js-tab’)
.getElementsByTagName(‘li’)
var div = document
.getElementById(‘js-div’)
.getElementsByTagName(‘div’)
function AllTabs() {
for (var i = 0; i < tab.length; i++) {
tab[i].style.color = ‘#000’
tab[i].style.backgroundColor = ‘#fff’
}
}
function AllNone() {
for (var i = 0; i < div.length; i++) {
div[i].style.display = ‘none’
}
}
function xuanxiangka(i) {
AllTabs()
AllNone()
tab[i].style.color = ‘#fff’
tab[i].style.backgroundColor = ‘#f00’
div[i].style.display = ‘block’
}
</script>
</body>
</html>
后来，为了提升性能，再仔细看一看自己的代码，好多地方性能都不是很好，比如说style，以及每次切换选项卡都必须把所有的样式都重置一遍，所以再次改变一下自己的代码：不用每次都重置一遍了，更改样式的只有旧的和新的，兼容性还不错，皆大欢喜
html 代码片段
<!DOCTYPE html>
<html>
<head>
<meta charset=”utf-8″ />
<style>
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
.js-tab {
width: 300px;
}
.js-tab li {
float: left;
width: 100px;
height: 25px;
border: #000 solid 1px;
color: #000;
background-color: #fff;
list-style: none;
cursor: pointer;
}
.js-tab li.js-click {
color: #fff;
background-color: #f00;
}
.js-div {
border: #000 solid 1px;
width: 300px;
height: 100px;
}
.js-div div {
height: 100%;
}
.display {
display: none;
}
.clearfix:after {
content: ‘\200B’;
height: 0;
display: block;
clear: both;
}
</style>
</head>
<body>
<ul class=”js-tab clearfix” id=”js-tab”>
<li class=”js-click” onclick=”xuanxiangka(0)”>选项卡1</li>
<li onclick=”xuanxiangka(1)”>选项卡2</li>
<li onclick=”xuanxiangka(2)”>选项卡3</li>
</ul>
<div class=”js-div” id=”js-div”>
<div>内容1</div>
<div class=”display”>内容2</div>
<div class=”display”>内容3</div>
</div>
<script>
var tab = document
.getElementById(‘js-tab’)
.getElementsByTagName(‘li’)
var div = document
.getElementById(‘js-div’)
.getElementsByTagName(‘div’)
var index = 0
function xuanxiangka(i) {
tab[index].removeAttribute(‘class’)
div[index].className = ‘display’
index = i
tab[index].className = ‘js-click’
div[index].removeAttribute(‘class’)
}
</script>
</body>
</html>
在后来，由于jquery的影响，样式和js分离，onclick事件不写在html上，以及杜绝全局变量等等，于是又有了新写法：
html 代码片段
<!DOCTYPE html>
<html>
<head>
<meta charset=”utf-8″ />
<style>
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
.js-tab {
width: 300px;
}
.js-tab li {
float: left;
width: 100px;
height: 25px;
border: #000 solid 1px;
color: #000;
background-color: #fff;
list-style: none;
cursor: pointer;
}
.js-tab li.js-click {
color: #fff;
background-color: #f00;
}
.js-div {
border: #000 solid 1px;
width: 300px;
height: 100px;
}
.js-div div {
height: 100%;
}
.display {
display: none;
}
.clearfix:after {
content: ‘\200B’;
height: 0;
display: block;
clear: both;
}
</style>
</head>
<body>
<ul class=”js-tab clearfix” id=”js-tab”>
<li class=”js-click”>选项卡1</li>
<li>选项卡2</li>
<li>选项卡3</li>
</ul>
<div class=”js-div” id=”js-div”>
<div>内容1</div>
<div class=”display”>内容2</div>
<div class=”display”>内容3</div>
</div>
<script>
;(function() {
var tab = document
.getElementById(‘js-tab’)
.getElementsByTagName(‘li’)
var div = document
.getElementById(‘js-div’)
.getElementsByTagName(‘div’)
var index = 0
function xuanxiangka() {
tab[index].removeAttribute(‘class’)
div[index].className = ‘display’
index = this.getAttribute(‘data-index’)
tab[index].className = ‘js-click’
div[index].removeAttribute(‘class’)
}
;(function() {
for (var i = 0, j = tab.length; i < j; i++) {
tab[i].addEventListener(‘click’, xuanxiangka, false)
tab[i].setAttribute(‘data-index’, i)
}
})()
})()
</script>
</body>
</html>
利用冒泡事件也可以写选项卡，css3的pointer-events属性可以有效的避免在冒泡事件中误点到其他元素：
html 代码片段
<!DOCTYPE html>
<html>
<head>
<meta charset=”utf-8″ />
<style>
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
.js-tab {
width: 300px;
pointer-events: none;
}
.js-tab li {
float: left;
width: 100px;
height: 25px;
border: #000 solid 1px;
color: #000;
background-color: #fff;
list-style: none;
cursor: pointer;
pointer-events: all;
}
.js-tab li.js-click {
color: #fff;
background-color: #f00;
}
.js-div {
border: #000 solid 1px;
width: 300px;
height: 100px;
}
.js-div div {
height: 100%;
}
.display {
display: none;
}
.clearfix:after {
content: ‘\200B’;
height: 0;
display: block;
clear: both;
}
</style>
</head>
<body>
<ul class=”js-tab clearfix” id=”js-tab”>
<li class=”js-click”>选项卡1</li>
<li>选项卡2</li>
<li>选项卡3</li>
</ul>
<div class=”js-div” id=”js-div”>
<div>内容1</div>
<div class=”display”>内容2</div>
<div class=”display”>内容3</div>
</div>
<script>
;(function() {
var tab = document.getElementById(‘js-tab’)
var tabLi = tab.getElementsByTagName(‘li’)
var div = document
.getElementById(‘js-div’)
.getElementsByTagName(‘div’)
var index = 0
function xuanxiangka(event) {
var e = event.target
tabLi[index].removeAttribute(‘class’)
div[index].className = ‘display’
index = e.getAttribute(‘data-index’)
e.className = ‘js-click’
div[index].removeAttribute(‘class’)
}
;(function() {
for (var i = 0, j = tabLi.length; i < j; i++) {
tabLi[i].setAttribute(‘data-index’, i)
}
tab.addEventListener(‘click’, xuanxiangka, false)
})()
})()
</script>
</body>
</html>
最后来个构造函数，为了保证能使用各种标签，用id来代替tagname：
html 代码片段
<!DOCTYPE html>
<html>
<head>
<meta charset=”utf-8″ />
<style>
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
.js-tab {
width: 300px;
pointer-events: none;
}
.js-tab li {
float: left;
width: 100px;
height: 25px;
border: #000 solid 1px;
color: #000;
background-color: #fff;
list-style: none;
cursor: pointer;
pointer-events: all;
}
.js-tab li.js-click {
color: #fff;
background-color: #f00;
}
.js-div {
border: #000 solid 1px;
width: 300px;
height: 100px;
}
.js-div div {
height: 100%;
display: none;
}
.js-div div.js-block {
display: block;
}
.clearfix:after {
content: ‘\200B’;
height: 0;
display: block;
clear: both;
}
</style>
</head>
<body>
<ul class=”js-tab clearfix”>
<li class=”js-click” id=”js-tab-a”>选项卡1</li>
<li id=”js-tab-b”>选项卡2</li>
<li id=”js-tab-c”>选项卡3</li>
</ul>
<div class=”js-div”>
<div class=”js-block” id=”js-div-a”>内容1</div>
<div id=”js-div-b”>内容2</div>
<div id=”js-div-c”>内容3</div>
</div>
<script>
;(function() {
function Class_XuanXiangKa(
tab,
div,
tabClassname,
divClassname,
) {
var _self = this
this.tab = tab
this.div = div
this.tabClassname = tabClassname
this.divClassname = divClassname
this.index = 0
this.Click = function(event) {
_self.tab[_self.index].removeAttribute(‘class’)
_self.div[_self.index].removeAttribute(‘class’)
_self.index = this.getAttribute(‘data-index’)
_self.tab[_self.index].className = _self.tabClassname
_self.div[_self.index].className = _self.divClassname
}
this.init = (function() {
for (var i = 0, j = _self.tab.length; i < j; i++) {
_self.tab[i].addEventListener(
‘click’,
_self.Click,
false,
)
_self.tab[i].setAttribute(‘data-index’, i)
}
})()
}
var xxk = new Class_XuanXiangKa(
[
document.getElementById(‘js-tab-a’),
document.getElementById(‘js-tab-b’),
document.getElementById(‘js-tab-c’),
],
[
document.getElementById(‘js-div-a’),
document.getElementById(‘js-div-b’),
document.getElementById(‘js-div-c’),
],
‘js-click’,
‘js-block’,
)
})()
</script>
</body>
</html>
| 前端开发插件 |
| sublime的前端开发插件 |
| chrome 前端开发插件 |
» 本文来自：前端开发者 » 《js选项卡的N种写法》
» 本文链接地址：https://www.rokub.com/6415.html
» 您也可以订阅本站：https://www.rokub.com
近期评论