<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>JS Bin</title>
</head>
<body>
<div id='bigger'>
<div id="tab1" class='tabs' tabContent = '内容1'>tab1</div><div id="tab2" class='tabs' tabContent = '内容2'>tab2</div><div id="tab3" class='tabs' tabContent = '内容3'>tab3</div>
<div id="content">内容1</div>
</div>
</body>
</html>
*{margin:0;padding:0}
div{border: 1px solid #aaaaaa }
#bigger{padding:5px;width:500px}
.tabs{
display:inline-block;
width:165.3px;
text-align:center ;
padding : 5px 0 ;
border-width:1px 0 0 1px;
}
#tab3{border-width:1px 1px 0 1px}
#content{padding:30px;height:100px;}
.tabs:hover{
background-color: #eee;
cursor:pointer
}
var tabList = document.getElementsByClassName('tabs')
var content = document.querySelector('#content')
for(var i=0 ;i<tabList.length ;i++){
tabList[i].addEventListener('click',function(e){
content.innerText = e.currentTarget.getAttribute('tabContent')
},false)
}
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>JS Bin</title>
</head>
<body>
<div>
<button id=btn>点我1</button>
<div id="content">
<div id="content-header">
<h3>我是标题1</h3>
<span id=x-box>×</span>
</div>
<div id="content-body">
<p>我是内容1</p>
<p>我是内容1</p>
</div>
<div id="content-footer">
<span id='btn-cancel'>取消</span>
<span id='btn-ok'>确定</span>
</div>
</div>
</div>
<div id="cover"></div>
</body>
*{padding:0;margin:0}
#content{
position : absolute;
border : 1px solid #fff;
top:0;
left:0;
right:0;
bottom:0;
margin : auto;
width : 400px;
height: 200px;
border-radius:5px;
z-index:2;
background-color: white;
}
#content-header{
padding :10px;
border-bottom :1px solid #aaa
}
#x-box{
position:absolute;
right:10px;
top:10px;
font-size : 20px;
cursor:pointer;
}
#content-body{
padding :12px 10px;
}
#content-body>p{
margin : 20px 0 ;
}
#content-footer{
border-top:1px solid #ccc;
text-align : right;
padding :10px;
}
#cover{
background-color: #aaa;
position : absolute;
height:100%;
width:100%
top:0;
left:0;
right:0;
z-index:1;
opacity:0.7;
}
#btn{
position:absolute;
margin : 10px;
}
#cover,#content{display:none;}
span{ cursor:pointer}
var btnStart = document.querySelector('#btn')
var contentBox = document.getElementById('content')
var cover = document.getElementById('cover')
btnStart.addEventListener('click',function(){
contentBox.style.display = 'block';
cover.style.display = 'block'
},false)
function goBack(){
contentBox.style.display = 'none';
cover.style.display = 'none'
}
document.querySelector('#btn-cancel').addEventListener('click',goBack,false)
document.querySelector('#x-box').addEventListener('click',goBack,false)
cover.addEventListener('click',goBack,false)
方方的Tab组件
JQ
原生JS和JQ一个意思但是麻烦了不少
http://js.jirengu.com/sixil/1/edit?html,css,js,output
<!DOCTYPE html>
<html>
<head>
<script src="//code.jquery.com/jquery-2.1.1.min.js"></script>
<meta charset="utf-8">
<title>JS Bin</title>
</head>
<body>
<div class="tabs">
<nav class="nav">
<ol>
<li class=active>1</li>
<li>2</li>
<li>3</li>
</ol>
</nav>
<div class="panes">
<ol>
<li class=active>a</li>
<li>b</li>
<li>c</li>
</ol>
</div>
</div>
<hr>
<div class="tabs">
<nav class="nav">
<ol>
<li class=active>1</li>
<li>2</li>
<li>3</li>
</ol>
</nav>
<div class="panes">
<ol>
<li class=active>a</li>
<li>b</li>
<li>c</li>
</ol>
</div>
</div>
</body>
</html>
*{margin:0;padding:0;}
ul,ol{list-style:none;}
.tabs .nav > ol{
display: flex;
}
.tabs .nav > ol > li{
border: 1px solid red;
padding: 0 2em;
}
.tabs .nav > ol > li.active{
background: red;
}
.tabs > .panes > ol >li{
border: 1px solid blue;
min-height: 5em;
display: none;
}
.tabs > .panes > ol >li.active{
display: block;
}
$('.tabs').on('click', '.nav ol>li', function(e){
var $li = $(e.currentTarget)
var n = $li.index()
$li.addClass('active').siblings('.active').removeClass('active')
$li.closest('.tabs').find('.panes>ol>li').eq(n)//因为选不到tabs，所以要从子往父找。
.addClass('active').siblings('.active')
.removeClass('active')
})
网友评论