简单实用js选项卡（原生态）

最新推荐文章于 2024-07-03 21:37:53 发布

原创最新推荐文章于 2024-07-03 21:37:53 发布 · 1k 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#class #div #function #float #css

javascript 专栏收录该内容

14 篇文章

订阅专栏

本文介绍了一种使用HTML、CSS和JavaScript实现的简单选项卡效果。通过为不同的`<li>`元素和`<div>`元素设置特定的类，并利用JavaScript进行事件绑定，实现了选项卡式的界面切换效果。

CSS样式：

<style type="text/css">
#tab li.option{ float:left; list-style:none; height:1.8em; line-height:1.8em; font-size:14px; font-weight:bold; text-align:center; width:5em; margin:0 5px; background:#999;}
#tab div.content{ width:500px; height:350px; background:#ffcc99; clear:both; display:none;}
#tab li.seletedLi{ background:#ffcc99;}
#tab div.seletedDiv{ display:block;}
</style>

Html代码：

<div id='tab'>
<ul>
 <li class="option seletedLi">第一部分</li>
 <li class="option">第二部分</li>
 <li class="option">第三部分</li>
 <li class="option">第四部分</li>
 <li class="option">第五部分</li>
</ul>
<div class="content seletedDiv">第一部分</div>
<div class="content">第二部分</div>
<div class="content">第三部分</div>
<div class="content">第四部分</div>
<div class="content">第五部分</div>
</div>

js代码：

<script>
 var oTab = document.querySelector('div');
 var oLis = oTab.querySelectorAll('li');
 var oDiv = oTab.querySelectorAll('div');
 var oLisLength = oLis.length;
function changeTab(Index){
	for(var i=0;i<oLisLength;i++){
		oLis.item(i).className = 'option';
		oDiv.item(i).className = 'content';
		}
		oLis.item(Index).className = 'option seletedLi';
		oDiv.item(Index).className = 'content seletedDiv';	
}
for(var i=0;i<oLisLength;i++){
	oLis.item(i).lis=i;
	oLis.item(i).onclick=function fn(){changeTab(this.lis)};
	}

</script>

演示地址： http://www.cpan.cc/upload/1014-1.html