考虑下面的html代码,帮忙写下下面的HTML代码，谢谢

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';

}

这样行吗?不太清楚你表达的意思