千秋此意
html>
tabview* { margin: 0; padding: 0; list-style: none; }
.tab { width: 500px; height: 300px; margin: 100px auto; text-align: center; position: relative; overflow: hidden; }
.con { width: 100%; height: 100%; position: relative; transition: all .4s ease; overflow: hidden; }
.con li { width: 500px; height: 100%; background-color: #424b50; color: #f3f8f1; line-height: 300px; float: left; }
.nav { width: 100%; height: 30px; position: absolute; bottom: 0; left: 0; overflow: hidden; text-align: center; }
.nav li { width: 20px; height: 20px; background-color: #f3f8f1; display: inline-block; border-radius: 50%; color: #424b50; cursor: pointer; }
.nav li.ac { background-color: #9d2932; color: #f3f8f1; }
- item 001
- item 002
- item 003
- item 004
- item 005
- 1
- 2
- 3
- 4
- 5
var oTab = document.querySelector('.tab'),
oCon = oTab.querySelector('.con'),
aNav = oTab.querySelectorAll('.nav li'),
iNow = 0;
oCon.style.width = oTab.offsetWidth * aNav.length + 'px';
for (var i = 0; i
!function(index){
aNav[i].onclick = function(){
iNow = index;
fnTab();
}
}(i);
}
fnTab();
function fnTab(){
for (var i = 0; i
aNav[i].classList.remove('ac');
}
aNav[iNow].classList.add('ac');
oCon.style.left = '-' + (iNow * oTab.offsetWidth) + 'px';
}
这样行吗?不太清楚你表达的意思