<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style type="text/css">
*{
margin: 0;
padding: 0;
}
body{
font-size: 14px;
}
span{
display: inline-block;
width: 189px;
height: 32px;
line-height: 32px;
text-align: center;
font-size: 16px;
cursor: pointer;
}
.active{
border-bottom: 4px solid #c3b598;
}
.login_a{
width: 325px;
height: 325px;
/*border: 1px solid #ccc;*/
text-align: center;
line-height: 325px;
}
.login_b{
width: 325px;
height: 325px;
/*border: 1px solid #ccc;*/
text-align: center;
line-height: 325px;
display: none;
}
</style>
</head>
<body>
<div class="login">
<span class="active">登錄</span><span>註冊</span>
<div class="login_a">登錄板塊</div>
<div class="login_b">註冊板塊</div>
</div>
<script type="text/javascript">
let divpages = document.querySelectorAll('.login>div');
console.log(divpages);
let navs = document.querySelectorAll('.login>span');
for(let i=0;i<navs.length;i++){
navs[i].onclick = function(e){
let activedNav = this.parentNode.querySelector('.active');
if(activedNav == this){
return;
}
activedNav.className = '';
this.className = 'active';
let index = searchNavIndex(this);
console.log(index);
let activeIndex = searchNavIndex(activedNav);
console.log(activeIndex);
if(index > activeIndex){
divpages[activeIndex].style.display = 'none';
divpages[index].style.display = 'block';
}
else{
divpages[activeIndex].style.display = 'none';
divpages[index].style.display = 'block';
}
}
}
// 獲取索引
function searchNavIndex(navItem){
let index = -1;
for(let i = 0 ;i < navs.length; i++){
if(navs[i] === navItem){
index = i;
break;
}
}
return index;
}
</script>
</body>
</html>
js實現選項卡效果
發表評論
所有評論
還沒有人評論，想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章
Javascript漂流記（上）__條件語句、循環語句
開喫前，二哥想吟詩一首： 此係列套餐屬二哥原創，整理自 "渡一教育Javascript課程" ，一個值得推薦的"渡一教育"。 今日套餐：條件語句、循環語句 一、條件語句： if(true){
寫一個加法函數sum同時支持sum(x,y)sum(x)(y)
function sum(){ var num = arguments[0]; if(arguments.length==1){ return function(sec){
ES6 基礎 - 02
1.箭頭函數： 在ES6以前，寫函數表達式的格式爲： var a = function b(){ console.log('hello') } a() //"hello" ES6中出現了箭頭函數，簡寫