<style>
.nav-tabs {
height: 36px;
margin-bottom: 3px;
}
.nav-tabs span {
background-color: lightgray;
padding: 8px;
color: blue;
}
.nav-tabs .active {
background-color: black;
color: white;
}
.tab-content .show {
margin-top: 6px;
display: block;
}
.tab-content div {
display: none;
}
</style>
<script type="text/javascript">
window.onload=function(){
function selectActive(){
var div=this.parentElement;
var spans=div.getElementsByTagName("span");
for(var i=0;i<spans.length;i++){
spans[i].className = '';
}
this.className = 'active';
var tabContent = div.getElementsByClassName('tab-content')[0];
var divs = tabContent.children;
for (var i = 0; i < divs.length; ++i) {
divs[i].className = '';
}
divs[this.index].className = 'show';
}
var tabs = document.getElementsByClassName('nav-tabs');
for (var divIndex = 0; divIndex < tabs.length; ++divIndex) {
var spans = tabs[divIndex].getElementsByTagName('span');
for (var spanIndex = 0; spanIndex < spans.length; ++spanIndex) {
spans[spanIndex].index = spanIndex;
spans[spanIndex].onclick = selectActive;
}
}
}
</script>
<body>
<div class='nav-tabs'>
<span class='active'>1</span>
<span>2</span>
<span>3</span>
<span>4</span>
<div class='tab-content'>
<div class='show'>这是第一个导航页面</div>
<div>这是第二个导航页面</div>
<div>这是第三个导航页面</div>
<div>这是第四个导航页面</div>
</div>
</div>
<div style='margin: 20px'></div>
<div class='nav-tabs'>
<span class='active'>0</span>
<span>1</span>
<span>2</span>
<span>3</span>
<div class='tab-content'>
<div class='show'>这是第一个导航页面</div>
<div>这是第二个导航页面</div>
<div>这是第三个导航页面</div>
<div>这是第四个导航页面</div>
</div>
</div>
class实现导航条功能
最新推荐文章于 2020-11-25 21:34:02 发布