Dom操作之tab栏模板

news/2024/7/19 15:20:54 标签: js, css, javascript, html

tab栏模板

html"><!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <div id="container">
        <a href=""></a>
        <a href=""></a>
        <a href=""></a>
        <a href=""></a>
    </div>

    <script>html" title=javascript>javascript">
        var container = document.querySelector('#container');
        var as = container.querySelectorAll('a');
        console.log(as);
    </script>
</body>
</html>

html"><!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>选项卡</title>
		<style type="text/html" title=css>css">html" title=css>css">
			*{margin: 0; padding: 0; font-family: "微软雅黑";font-size: 14px;}
			#container{
				width: 398px; 
				margin: 100px auto;}
			#container a{
				display:block ;
				width: 98px; 
				height: 42px; 
				line-height: 42px; 
				text-align: center; 
				float: left;
				border-top: solid 1px #FF4400;
				border-bottom: solid 1px #FF4400;
				border-left: solid 1px #FF4400;
				color: #333333;
				text-decoration: none;
			}
			#container a:hover{
				color: #FF4400;
			}
			.content{
				width: 355px;
				height: 140px;
				text-align: center;
				border-right: solid 1px #FF4400;
				border-bottom: solid 1px #FF4400;
				border-left: solid 1px #FF4400;
				padding: 30px 0 0 40px;
				display: none;
			}
			.clear{clear: left;}
			#container a.on{ background: #FF4400; color: #fff;}
		</style>
	
	</head>
	<body>
		<div id="container">
			<a href="#"  class="on">红</a>
			<a href="#" >黄</a>
			<a href="#" >绿</a>
			<a href="#"html" title=css>css">  style="border-right: solid 1px #FF4400;">蓝</a>

			<div class="clear"></div>
			
			<div class="content"html" title=css>css"> style="display:block; background-color: red;">
				<!-- <img src="images/1.png" /> -->
			</div>
			<div class="content"html" title=css>css"> style="background-color: yellow;">
				<!-- <img src="images/2.png" /> -->
			</div>
			<div class="content"html" title=css>css"> style="background-color: lightgreen;">
				<!-- <img src="images/3.png" /> -->
			</div>

			<div class="content"html" title=css>css"> style="background-color: skyblue;">
				<!-- <img src="images/4.png" /> -->
			</div>
		</div>
	</body>
</html>
<script type="text/html" title=javascript>javascript">html" title=javascript>javascript">
	 // 找到所有的导航
	 var container = document.getElementById("container");
	 var as = container.getElementsByTagName("a");
	 // 找到所有内容
	 var oDivs = document.getElementsByClassName("content");
	 // 给所有的a链接绑定事件
	 for(var i=0; i<as.length; i++) {
	 	as[i].setAttribute("index", i);
	 	//as[i].index = i; // 给对象动态增加一个属性
	 	as[i].onclick = function() {
	 		// 给当前的链接设置样式 其他的去除 ----排他思想
	 		// 先清楚所有链接样式和让所有的内容div隐藏 
	 		for(var j=0; j<as.length; j++) {
	 			as[j].className = "";
                oDivs[j].style.display = "none";
	 		}
	 		// 对当前自己设置on样式
	 		this.className = "on";
	 		// 让对应的内容显示 0-0  1-1 2-2
	 		var index = this.getAttribute("index"); // 当前超链接的索引
	 		//var index = this.index;
	 		oDivs[index].style.display = "block";
	 	}
	 }
</script>

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

相关文章

POJ - 3335 Rotating Scoreboard （半平面交模板）

POJ - 3335 Rotating Scoreboard （半平面交模板）

链接&#xff1a;https://cn.vjudge.net/problem/POJ-3335 题意&#xff1a;判断直线的半平面交是否有核。&#xff08;也是判断一个不规则多边形内部是否存在一个区域&#xff0c;可以看到多边形的全貌。&#xff09; 思路&#xff1a;半平面交板子题&#xff0c;这里存个模…
阅读更多...
Promise的使用与实现源码

Promise的使用与实现源码

Promise的使用与实现源码 使用01 const Promise require(./P01.js);const p new Promise((resolve, reject) > {//ajax,定时器console.log(123);// throw new Error(Error);resolve(成功了);// reject(失败了); });p.then((data) > {console.log(data, success01); }…
阅读更多...
POJ - 2451 Uyuw's Concert（半平面交求核面积）

POJ - 2451 Uyuw's Concert（半平面交求核面积）

链接&#xff1a;https://cn.vjudge.net/problem/POJ-2451 题意&#xff1a;半平面交求核面积。 思路&#xff1a;板子题&#xff0c;也是存板子。两个板子&#xff0c;思想一样&#xff0c;实现略微不同。 1. #include <cstdio> #include <iostream> #include…
阅读更多...
DOM(Document Object Model)学习路线

DOM(Document Object Model)学习路线

21数组.html /* 早期的版本&#xff1a;1// push()功能&#xff1a;在数组末尾添加一个或多个元素参数&#xff1a;添加的元素序列返回值&#xff1a;返回的是原数组增加元素后的长度特点 会改变原数组2// unshift() 用法基本与push()一样&#xff0c;只是在数组前面添加元素…
阅读更多...
凸包/旋转卡壳/半平面交学习总结

凸包/旋转卡壳/半平面交学习总结

1.凸包 参考博客&#xff1a;https://blog.csdn.net/qq_34374664/article/details/70149223 定义&#xff1a;假设平面上有若干个点&#xff0c;过某些点作一个多边形&#xff0c;使这个多边形能把所有点都“包”起来。当这个多边形是凸多边形的时候&#xff0c;我们就叫它“凸…
阅读更多...
HDU - 5017 Ellipsoid (三分/模拟退火）

HDU - 5017 Ellipsoid (三分/模拟退火）

链接&#xff1a;https://cn.vjudge.net/problem/HDU-5017 题意&#xff1a;给出一个椭球面&#xff0c;求椭球面上原点最近的距离。 思路&#xff1a;首先&#xff0c;我们只需要考虑椭球的1/8&#xff08;因为它关于原点对称。&#xff09;&#xff0c;然后&#xff0c;这1…
阅读更多...
POJ - 3436 ACM Computer Factory（最大流+拆点+输出流量路径）

POJ - 3436 ACM Computer Factory（最大流+拆点+输出流量路径）

链接&#xff1a;https://cn.vjudge.net/problem/POJ-3436 题意&#xff1a;N个制作电脑的工厂&#xff0c;一个完整的电脑有P个部件。每个工厂每小时都可以把若干个半成品电脑变成若干半成品或成品电脑。也就是给他若干个有某些零件的半成品电脑&#xff08;有些必须有&#…
阅读更多...
一次性把GC讲清楚

一次性把GC讲清楚

一次性把GC讲清楚 垃圾收集 GC&#xff08;Garbage Collection&#xff09;是 Java 非常重要的核心技术之一&#xff0c;Java 开发中程序员不需要关心对象的内存分配和资源释放&#xff0c;这些都由 GC 来完成&#xff0c;这使得 Java 开发者只需要将注意力集中在业务逻辑的处理…
阅读更多...
最新文章

Copyright @ 2022~2023