5.隔行变色&选项卡

最新推荐文章于 2022-07-14 13:14:04 发布

原创最新推荐文章于 2022-07-14 13:14:04 发布 · 272 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#js

javascript 专栏收录该内容

12 篇文章

订阅专栏

本文介绍了如何使用CSS和JavaScript实现表格的隔行变色，包括基于CSS的基础方法和通过JS获取DOM元素实现变色。此外，还详细讲解了一个选项卡的案例，提供了解决方案和WebStorm快捷键提示。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

1基于css实现隔行变色

<!DOCTYPE html>
	<html>
	<head>
		<title></title>
		<style type="text/css">
			*{
				margin: 0;
				padding: 0;
			}
			ul,ol{
				list-style: none;
			}
			.box{
				width:300px;
				margin:20px auto;
			}
			.box li{
				padding: 0 5px;
				line-height: 35px;
				border-bottom: 1px dashed #AAA;

				/*超出一行的内容自动裁剪，以省略号代替*/
				text-overflow: ellipsis;
				white-space: nowrap;
				overflow: hidden;

			}

			/*==css3
				nth-child(n)：当前容器所有子元素中的第n个
				.box li:nth-child(1):box容器所有子元素中的第一个并且标签名是li的

				nth-of-type(n)：先给当前容器按照某一个标签名进行分组，获取分组中的第n个
				.box li:nth-of-type(1)：先获取box中所有的Li,再获取li中的第一个
			*/

			.box li:nth-of-type(even){ /*even偶数 odd奇数*/
				background: lightcyan;
			}

			.box li:hover{/*鼠标滑过的样式 鼠标离开回归原有样式*/
				background: lightcoral;
			}

			/*.box li:nth-of-type(3n+1){
				color: red;
			}
			.box li:nth-of-type(3n+2){
				color: green;
			}
			.box li:nth-of-type(3n){
				color: blue;
			}*/

		</style>
	</head>
	<body>
	<ul class="box">
		<li>1111</li>
		<li>2222</li>
		<li>3333</li>
		<li>4444</li>
		<li>5555</li>
		<li>6666</li>
	</ul>
	</body>
	</html>

2.基于js实现隔行变色

获取页面中的DOM元素

document.getElementById

在整个文档中，通过元素的id属性值，获取到整个元素对象
getElementById是获取元素的方法，而document限定了获取元素的范围，我们把这个范围称之为“上下文[context]”

1.通过getElementById获取的元素是一个对象数据类型的值（里面包含很多内置的属性）
    var obox = document.getElementById('box');
    typeof obox =>"object"
2.分析包含的属性
    console.dir(obox);
    className: "box" =》存储的是一个字符串，代表当前元素的样式类名
    id: "box" =》存储的是当前元素的id值（字符串）
    innerHTML：存储当前元素中所有的内容（包含html标签）
    innerText：存储当前元素中所有的文本内容（没有元素标签）
    onclick：元素的一个事件属性，基于这个属性，可以给当前元素绑定点击事件
    onmouseover：鼠标滑过事件
    onmouseout：鼠标离开事件
    style：存储当前元素所有行内样式值（获取和操作的都只能是写在标签上的行内样式，写在样式表中的样式，无法基于这个属性获取到）

在这里插入图片描述

<script type="text/javascript">
	//1.获取box中所有的li(需要先获取box)
	var obox = document.getElementById('box');
	//2.想要修改box的样式
	//=>通过style修改行内样式
	//obox.style.backgroundColor='pink';

	//思考如何获取当前元素的所有样式

	//=>基于class-name属性修改box的样式类，从而改变样式
	//obox.className = 'box bgColor';
	obox['className'] += ' bgColor';
	</script>
	
	<style>
		.bgColor{
			background-color: pink;
		}
	</style>

[context].getElementsByTagName

在指定的上下文中，通过元素的标签名获取一组元素集合
上下文由我们自己来指定

    在obox中获取所有li
    var boxList = obox.getElementsByTagName('li');
    1. 获取的结果是一个元素集合 HTMLCollection，它也是对象数据类型，结构和数组非常相似(数字作为索引，length代表长度)，但是不是数组，我们把它叫做“类数组”
    boxList[0]	获取当前集合中的第一个li（通过索引获取到具体的某一个li即可）
    boxList.length	获取集合中Li的数量
    2. 集合中的每一项存储的值又是一个元素对象（对象数据类型，包含很多的内置属性，例如：id/className...）
    boxList[1].style.color='red' 修改集合中第二个li的文字颜色

在这里插入图片描述

<script type="text/javascript">
    for(var i=0; i<boxList.length;i++){
	 	if(i%2!==0){
	 		//boxList[i].style.backgroundColor = 'pink';
	 		//boxList[i].className += ' bgColor';
	 	}
	 }

	 for (var i = 1; i < boxList.length; i+=2) {
	 		boxList[i].className += ' bgColor';
	 }
    </script>
    思考题：实现隔三行变色

3.选项卡案例

div.tabox#tabbox>(ul>li3)+(div3) [tab] webstorm快捷键

<!DOCTYPE html> 
	<html>
	<head>
		<title></title>
		<link rel="stylesheet" type="text/css" href="reset.min.css">
		<style type="text/css">
			.tabbox{
				width: 500px;
				margin: 20px auto;
			}

			.tabbox ul{
				position: relative;
				top: 1px;
				/*相对于自己之前的位置向下移动1px，使边框重合*/
			}

			.tabbox ul li{
				border: 1px solid #AAA;
				display: inline-block;
				padding: 0 10px;
				margin-right: 10px;
				line-height: 33px;
				cursor: pointer;
			}

			.tabbox ul li.active{
				color: green;
				font-weight: bold;
				border-bottom-color: #FFF; 
				/*当前li的边框覆盖着div的边框，我们让li的下边框是背景颜色白色，这样看上去就想没有边框*/
			}
			.tabbox div{
				display: none;
				border: 1px solid #AAA;
				line-height: 175px;

			}
			.tabbox div.active{
				display: block;
			}
		</style>
	</head>
	<body>
	<div class="tabbox" id="tabbox">
		<ul>
			<li class="active">新闻</li>
			<li>电影</li>
			<li>音乐</li>
		</ul>
		<div class="active">全国人大会议</div>
		<div>解忧杂货铺</div>
		<div>未闻花名</div>
	</div>
	</body>
	<script type="text/javascript">
		//思路
		//1.给所有的li点击绑定事件 当点击任何一个lI的时候，都做第二步操作
		//2.可以先让所有的li div class都为空 再让点击的li和当前的div有active样式即可

		var tabbox = document.getElementById("tabbox");
		var tagList = tabbox.getElementsByTagName("li");
		var divList = tabbox.getElementsByTagName("div");

		//=>不行的代码
		// for (var i = 0; i < tagList.length; i++) {
		// 	// tagList[i] <=>每一轮循环当前要操作的那个li对象
		// 	tagList[i].οnclick= function (){
		// 		//=>事件绑定：给当前元素的某一个事件绑定一个方法，绑定的时候方法没有执行(属于创建一个方法)，当在页面中手动触发点击事件的时候绑定的方法才会执行
		// 		alert(i);
		// 		changeTab(i); //=>需要吧当前点击的这个li的索引传递进来
		// 	}
		// }

		console.log(tagList);
		//=>自定义属性方式
		for (var i = 0; i < tagList.length; i++) {
			//每一轮循环的时候，给每一个li设置一个自定义属性myIndex，存储的值是各自的索引
			tagList[i]['myIndex'] = i;
			tagList[i].onclick= function (){
				//this代表的是当前点击的这个li
				changeTab(this.myIndex);

			}
		}	



		//=>封装一个方法来完成页卡切换
		function changeTab(n){
			//=>n:形参变量，当执行这个方法的时候，会把当前点击的这个li的索引传递过来
			for (var i = 0; i < tagList.length; i++) {
				//1.所有都没有选中样式
				tagList[i].className = '';
				divList[i].className = '';
			}
			//2.当前点击的有选中样式
			tagList[n].className = 'active';
			divList[n].className = 'active';
		}
	</script>
	</html>

另一种方法吧循环中的var i=0;改为let i =0
或者这样写

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