tab-swich选项卡的制作

最新推荐文章于 2024-04-18 10:09:08 发布

七里香777

最新推荐文章于 2024-04-18 10:09:08 发布

阅读量215

点赞数 1

分类专栏：笔记 # CSS 文章标签： css js

本文链接：https://blog.csdn.net/weixin_44286392/article/details/107765701

版权

笔记同时被 2 个专栏收录

45 篇文章 0 订阅

订阅专栏

CSS

15 篇文章 0 订阅

订阅专栏

鼠标悬浮在某个li元素上时，就会显示其对应的内容。
效果图：
在这里插入图片描述

CSS中clear:left/right的含义及用法：https://blog.csdn.net/longgeaisisi/article/details/78493797
源码：

 <!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Tab-Switch 选项卡</title>
	<style>
	*{padding: 0px;margin: 0px;list-style: none;}
	#container{margin:50px;}
	ul li{cursor:pointer;float:left;color:blue;height:40px;line-height: 40px;margin-right:1px;padding:0px 10px;}
	#content{clear:left;/*清除左浮动*/
		width:300px;height:200px;}
	ul .on{color:red;font-weight:bold;border-bottom:2px solid red;}
	
/*	>是CSS的选择器，E>F表示选择E元素的所有子F元素，只选择一代
	E F表示选择所有后代元素*/
	#content>div{display:none;padding-top:5px;
				line-height:2.0;
				text-indent:2em;//用来缩进2个汉字
	
	}
	#content .selected{display:block;}
	</style>
</head>
<body>
	<div id="container">
		<ul id="tab">
			<li class="on">作业</li>
			<li>进程</li>
			<li>线程</li>
			<li>管程</li>
		</ul>
		<div id="content">
			<div class="selected">用户在一次解题或一个事务处理过程中要求计算机系统所做工作的集合。它包括用户程序、所需要的数据及控制命令等。作业是由一系列有序的步骤组成的。
			</div>
			<div>一个程序在一个数据集合上的一次运行过程，所以一个程序在不同数据集合上运行，乃至一个程序在同样数据集合上的多次运行都是不同的进程。
			</div>
			<div>
				线程是进程中的一个实体，它是被系统独立调度和执行的基本单位。
			</div>
			<div>
				管程实际上是定义了一个数据结构和在该数据结构上的能为并发进程所执行的一组操作，这组操作能同步进程和改变管程中的数据。
			</div>
		</div>
	</div>

	<script>
  		var tab=document.getElementById("tab").getElementsByTagName("li");
  		var div=document.getElementById("content").getElementsByTagName("div");
  		
  		for(var i=0;i<tab.length;i++){
  			tab[i].onmouseover=function(){
  				change(this)
  			}
  		}

  		function change(obj){
  			for(var i=0;i<tab.length;i++){
  				if(tab[i]==obj){
  					tab[i].className="on";
  					div[i].className="selected";
  				}
  				else{
  					tab[i].className="";
  					div[i].className="";
  				}

  			}
  				
  		}
	</script>
</body>
</html>