鼠标悬停标签切换内容js

news/2024/7/19 13:06:06 标签: js 
<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Tab效果</title>
	<style type="text/css">
		ul{
			list-style: none;
		}
		*{
			margin: 0;
			padding: 0;
		}
		#tab{
			border: 1px solid #ccc;
			margin: 20px auto;
			width: 403px;
			border-top: none;
		}
		.list ul{
			overflow: hidden;
		}
		.list li{
			float: left;
		}
		.list li{
			padding-left: 28px;
			padding-right: 28px;
			padding-top: 6px;
			padding-bottom: 6px;
			border: 1px solid #ccc;
			background: -moz-linear-gradient(top, #FEFEFE, #EDEDED);
			background:-webkit-gradient(linear,left top,left bottom, from(#fefefe), to(#ededed));
			border-right: none;
			cursor: pointer;
		}
		#listCon{
			height: 100px;
		}
		#listCon div{
			padding:10px;
			position:absolute;
			opacity:0;
			filter:alpha(opacity=0);
		}
		.list li:first-child{
			border-left: none;
		}
		.list li:hover{
			background: #fff;
			border-bottom: none;
		}
		.list li.act{
			background:pink;
      color:#fff;
			border-bottom: none;
		}
		#listCon div.act{
			opacity:1;
			filter:alpha(opacity=100);
		}
	</style>
</head>
<body>
	<div id="tab">
		<div class="list">
			<ul>
				<li class="act">苹果</li>
				<li>香蕉</li>
				<li>榴莲</li>
				<li>黄桃</li>
			</ul>
		</div>
		<div id="listCon">
			<div class="act">apple</div>
			<div>banana</div>
			<div>durian</div>
			<div>peach</div>
		</div>
	</div>
	<script type="text/javascript">
		window.onload = function(){
			var oDiv = document.getElementById("tab");
			var lis = oDiv.getElementsByTagName("li");
			var oDivCon = document.getElementById("listCon");
			var lisDiv = oDivCon.getElementsByTagName("div");			
			for(var i=0;i<lis.length;i++){
				lis[i].index = i;
				lis[i].onmouseover = function(){
					show(this.index);
				}
			}
			function show(a){
				for(var j=0;j<lis.length;j++){
					lis[j].className = "";
					lisDiv[j].className = "";					
				}
				lis[a].className = "act";
				lisDiv[a].className = "act";
			}
		}
	</script>
</body>
</html>

http://www.niftyadmin.cn/n/957446.html

相关文章

WARNING: file already exists but should not: C:\Users\workAI\AppData\Local\Temp\_MEI132522\torch\_C

WARNING: file already exists but should not: C:\Users\workAI\AppData\Local\Temp\_MEI132522\torch\_C

此bug是使用pyinstaller编译文件为exe文件中产生的&#xff0c;具体如下&#xff1a; WARNING: file already exists but should not: C:\Users\workAI\AppData\Local\Temp\_MEI132522\torch\_C述bug在编译和运行过程中没有产生影响&#xff0c;但是自己在偶然的原因不知不觉的…
阅读更多...
PyQt5基本窗口控件-----QRadioButton

PyQt5基本窗口控件-----QRadioButton

PyQt5学习之路&#xff0c;点击有pyqt5学习笔记 QRadioButton类提供了一组可供选择的按钮和文本标签&#xff0c;为用户提供多选一的操作。 import sys from PyQt5.QtWidgets import *class QRadioButtonDemo(QWidget):def __init__(self):super(QRadioButtonDemo, self).__in…
阅读更多...
算法学习（一）——Minimax算法

算法学习（一）——Minimax算法

作者&#xff1a;还想养只小短腿 链接&#xff1a;https://www.zhihu.com/question/27221568/answer/140874499 来源&#xff1a;知乎 著作权归作者所有。商业转载请联系作者获得授权&#xff0c;非商业转载请注明出处。 先来说极小极大算法主要应用于什么样的游戏&#xff…
阅读更多...
算法学习（二）——Alpha-Beta剪枝算法

算法学习（二）——Alpha-Beta剪枝算法

参考&#xff1a;https://blog.csdn.net/weixin_42192933/article/details/105873866 剪枝流程 这里以流程图来表述 图中红 线 \textcolor{Red}{红线}红线代表被剪枝的部分,蓝 线 \textcolor{Blue}{蓝线}蓝线代表流程,正方形代表maximum,圆形代表minimum 剪枝算法内部旨在求α…
阅读更多...
装这个版本成功了，最新版本不行

装这个版本成功了，最新版本不行

git clone -b v5.1.1 https://github.com/vuejs/vue-devtools.git装了&#xff0c;但vue没出来啊
阅读更多...
Python中的抽象方法@abstractmethod

Python中的抽象方法@abstractmethod

抽象方法是父类的一个方法, 父类没有实现这个方法, 父类是不可以实例化的. 子类继承父类, 子类必须实现父类定义的抽象方法, 子类才可以被实例化. Python中的abc提供了abstractmethod装饰器实现抽象方法的定义。 抽象类的实现 from abc import ABC, abstractmethodclass Foo(…
阅读更多...
Vue.js not detected？

Vue.js not detected？

Vue.js not detected有时候npm不行 要用yarn yarn run build&#xff0c;可以 终于好了&#xff0c;把mainf……里面的false改成true&#xff0c; 再yarn run build一次 再打开一个项目&#xff0c;yarn serve&#xff0c; 8080页面&#xff0c;再就好了。
阅读更多...
算法学习（三）——蒙特卡洛树搜索

算法学习（三）——蒙特卡洛树搜索

四个阶段&#xff1a; 选择&#xff0c;展开&#xff0c;模拟&#xff0c;反传 关键公式&#xff1a; 信任度上限树(Upper Confidence bound applied to Trees(UCT)) 参考文章&#xff1a; https://zhuanlan.zhihu.com/p/25345778 参考代码&#xff1a; https://github.…
阅读更多...
最新文章

Copyright @ 2022~2023