DOM
2016-10-02 本文已影响0人
成熟稳重的李先生
1.模态框
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>22-3</title>
<style>
html,body{
padding: 0;
margin:0;
}
a{
text-decoration: none;
color: black;
}
.btn{
display: block;
border: 1px solid #aaa;
border-radius: 3px;
margin:5px;
padding: 5px;
width: 50px;
text-align: center;
}
.modal{
height: 100%;
display: none;
}
.modal .cover{
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background-color: #000;
opacity: 0.4;
z-index: 99;
}
.modal .frame{
position: fixed;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
border: 1px solid #ddd;
border-radius: 5px;
width:400px;
z-index: 100;
background: white;
}
.frame:after{
display: block;
content: '';
clear: both;
}
.header{
position: relative;
border-bottom: 1px solid #ddd;
padding:10px;
}
.header p{
padding: 0;
margin:0;
}
.header .close{
position: absolute;
top: 10px;
right: 15px;
cursor: pointer;
}
.content{
padding:20px;
border-bottom: 1px solid #ddd;
}
.footer{
float: right;
}
.footer .cancel{
display:inline-block;
padding:10px;
}
.footer .yes{
display: inline-block;
padding:10px 20px 10px 10px;
}
</style>
</head>
<body>
<a href="" class="btn">点我</a>
<div class="modal">
<div class="cover"></div>
<div class="frame">
<div class="header">
<span>我是标题</span>
<p class="close">×</p>
</div>
<div class="content">
<p>我是内容</p>
<p>我是内容</p>
</div>
<div class="footer">
<a href="" class="cancel">取消</a>
<span class="yes">确定</span>
</div>
</div>
</div>
<script>
var btn = document.querySelector('.btn');
var modal = document.querySelector('.modal');
var modalFrame = document.querySelector('.frame');
btn.addEventListener('click',function(e){
e.stopPropagation();
e.preventDefault();
showModal(modal);
});
modalFrame.addEventListener('click', function(e){
e.stopPropagation();
if(hasClass(e.target,'close')||hasClass(e.target,'cancel')){
hideModal(modal);
console.log(e.target);
}
});
document.body.addEventListener('click',function(){
hideModal(modal);
})
function showModal(modal){
modal.style.display = 'block';
}
function hideModal(modal){
modal.style.display = 'none';
}
function hasClass(ele,cls){
return !!ele.className.match(new RegExp('\\b'+cls+'\\b'));
}
</script>
</body>
</html>
2.tab切换
<!DOCTYPE html>
<html>
<head>
<meta name="description" content="tab切换 原生js" />
<meta charset="utf-8">
<title>tab 切换</title>
<style>
.wrap{
border: 1px solid #ccc;
}
.wrap *{
box-sizing: border-box;
}
ul,li{
list-style: none;
padding: 0;
margin:0;
}
.tabs:after{
content: "";
display: block;
clear: both;
}
li{
float: left;
width: 33.3%;
height: 30px;
line-height: 30px;
text-align: center;
border-right: 1px solid #ccc;
border-bottom: 1px solid #ccc;
cursor: pointer;
}
.wrap .tabs li:last-child{
border-right: none;
}
.wrap .tabs .active{
background: #eee;
}
.wrap .panel{
display: none;
height: 180px;
padding: 20px;
}
.wrap .active{
display: block;
}
</style>
</head>
<body>
<div class="wrap">
<ul class="tabs">
<li class="active">tab1</li>
<li>tab2</li>
<li>tab3</li>
</ul>
<div class="panel active">内容1</div>
<div class="panel">内容2</div>
<div class="panel">内容3</div>
</div>
<script>
var Utils = {
hasClass: function(ele, cls){
return !!ele.className.match(new RegExp('\\b'+cls+'\\b'));
},
addClass:function(ele, cls){
if(ele.length && ele.length > 0){
for(var i=0; i<ele.length; i++){
Utils.singleAddClass(ele[i], cls);
}
}else{
Utils.singleAddClass(ele, cls);
}
},
removeClass:function(ele, cls){
if(ele.length && ele.length > 0){
for(var i=0; i<ele.length; i++){
Utils.singleRemoveClass(ele[i], cls);
}
}else{
Utils.singleRemoveClass(ele, cls);
}
},
singleAddClass: function(ele, cls){
if(Utils.hasClass(ele,cls)) return;
ele.className += ' ' + cls;
},
singleRemoveClass: function(ele, cls){
ele.className = ele.className.replace(new RegExp('\\b'+cls+'\\b', 'g'), '');
},
indexOf: function(ele){
var parent = ele.parentElement,
siblings = parent.children;
for(var i=0; i<siblings.length; i++){
if(ele === siblings[i]) return i;
}
return -1;
}
};
var tabCt = document.querySelector('.tabs');
tabCt.addEventListener('click', function(e){
var target = e.target,
tabs = tabCt.children,
index = Utils.indexOf(target),
panels = document.querySelectorAll('.panel');
if(index > -1){
Utils.removeClass(tabs, 'active');
Utils.addClass(target, 'active');
Utils.removeClass(panels, 'active');
Utils.addClass(panels[index], 'active');
}
});
</script>
</body>
</html>
