HTML+CSS+JAVASCRIPT实现横排选项卡

Intimes

已于 2022-02-03 20:58:20 修改

阅读量1.1k

点赞数 1

文章标签： css

于 2022-02-03 20:53:11 首次发布

本文链接：https://blog.csdn.net/zjjsd195/article/details/122778662

版权

效果图如下：

实现代码：

<html>
<head>
    <meta charset="gb2312">
    <title>tab选项卡</title>
    <style>
* {
	margin:0 auto;
	padding:0 auto;
}
 .tabBox {
	 margin: 20px auto;
	 width:500px;
	 width:90%;
 }
 .tabBox ul {
	 position:relative;
	 top:1px;
	 right:40px;
	 
 }
 .tabBox ul li {
	display: inline-block;
   
	margin-right:10px;
	padding:0 10px;
	line-height: 33px;
	border:1px solid #AAA;
	cursor: pointer;
 }
 .tabBox ul li.active {
	 color:lightcoral;
	 font-weight:bold;
	 border-bottom-color:#fff;
	
 }
  .tabBox div {
	  display: none;
	  line-height: 148px;
	  text-align: center;
	  border:1px solid #AAA;
  }
  .tabBox div.active {
	  display: block;
  }
</style>
</head>
<body>
<div class="tabBox" id="tabBox">
	<ul>
		<li class="active">新闻</li>
		<li>音乐</li>
		<li>电影</li>
		<li>电影1</li>
		<li>电影2</li>
	</ul>
	<div class="active">哈哈哈哈哈</div>
	<div>需要你陪</div>
	<div>复仇者联盟</div>
	<div>复仇者联盟1</div>
	<div>复仇者联盟2</div>
</div>
<script>
var tabBox = document.getElementById('tabBox');
var tabList = tabBox.getElementsByTagName('li');
var divList = tabBox.getElementsByTagName('div');

for (var i = 0; i < tabList.length; i++) { 
	tabList[i].onclick = function(i) {
		return function (){
			changeTab(i);
		}
} (i);
}

function changeTab(n){
	for (var i = 0 ; i < tabList.length; i++){
		tabList[i].className = '';
		divList[i].className = '';
	}
	tabList[n].className='active';
	divList[n].className='active';
}
</script>
</body>
</html>

为了方便，把CSS写在HTML的HEAD里了。

主要知识点：

1）利用div和列表组合实现题头；

2）利用javascript实现选项卡的切换。

Intimes

关注

1
点赞
踩
4

收藏

觉得还不错? 一键收藏
打赏
0
评论
HTML+CSS+JAVASCRIPT实现横排选项卡

效果图如下：实现代码：<html><head> <meta charset="gb2312"> <title>tab选项卡</title> <style>* { margin:0 auto; padding:0 auto;} .tabBox { margin: 20px auto; width:500px; width:90%; } .tabBox ul { posi
复制链接

扫一扫