JavaScript--选项卡

最新推荐文章于 2023-12-12 18:23:00 发布

huijie_0716

最新推荐文章于 2023-12-12 18:23:00 发布

阅读量205

点赞数

分类专栏： JavaScript 文章标签： javascript

本文链接：https://blog.csdn.net/huijie_0716/article/details/124334198

版权

JavaScript 专栏收录该内容

42 篇文章 1 订阅

订阅专栏

<!DOCTYPE html>

<html lang="en">

<head>

<meta charset="UTF-8" />

<meta http-equiv="X-UA-Compatible" content="IE=edge" />

<meta name="viewport" content="width=device-width, initial-scale=1.0" />

<title>Document</title>

<style>

* {

padding: 0;

margin: 0;

}

ul {

list-style: none;

}

a {

text-decoration: none;

}

.container {

width: 600px;

margin: 0 auto;

}

.container .header {

width: 600px;

height: 40px;

line-height: 40px;

background-color: #ccc;

}

.container .header li {

float: left;

width: 200px;

text-align: center;

}

.container .header li.on {

background-color: #f00;

}

.container .list {

width: 600px;

box-shadow: 0 0 0 2px #999 inset;

}

.container .list .con {

padding: 6px 10px;

display: none;

}

</style>

</head>

<body>

<div class="container">

<ul class="header">

<li class="on"><a href="#">html</a></li>

<li><a href="#">css</a></li>

<li><a href="#">js</a></li>

</ul>

<div class="list">

<div class="con">

html的内容<br />

HTML的全称为超文本标记语言，是一种标记语言。它包括一系列标签．通过这些标签可以将网络上的文档格式统一，使分散的Internet资源连接为一个逻辑整体。HTML文本是由HTML命令组成的描述性文本，HTML命令可以说明文字，图形、动画、声音、表格、链接等。

</div>

<div class="con">

<h4>css的内容</h4>

<p>

层叠样式表(英文全称：Cascading Style

Sheets)是一种用来表现HTML（标准通用标记语言的一个应用）或XML（标准通用标记语言的一个子集）等文件样式的计算机语言。CSS不仅可以静态地修饰网页，还可以配合各种脚本语言动态地对网页各元素进行格式化。

</p>

</div>

<div class="con">

<h4>js的内容</h4>

<p>

JavaScript（简称“JS”）

是一种具有函数优先的轻量级，解释型或即时编译型的编程语言。虽然它是作为开发Web页面的脚本语言而出名，但是它也被用到了很多非浏览器环境中，JavaScript

基于原型编程、多范式的动态脚本语言，并且支持面向对象、命令式、声明式、函数式编程范式。

</p>

</div>

</div>

</div>

</body>

<script>

var lis = document.querySelectorAll(".header li");

var cons = document.querySelectorAll(".list .con");

// 第一种 var

for (var i = 0; i < lis.length; i++) {

lis[i].idx = i; //给每一个li添加idx属性值为索引

lis[i].onclick = function () {

var _index = this.idx; //获取当前点击的li的属性idx的值索引

for (var j = 0; j < lis.length; j++) {

lis[j].className = "";

cons[j].style.display = "none";

}

this.className = "on";

cons[_index].style.display = "block";

};

}

// 第二种 let

// for (let i = 0; i < lis.length; i++) {

// lis[i].onclick = function () {

// for (var j = 0; j < lis.length; j++) {

// lis[j].className = "";

// cons[j].style.display = "none";

// }

// this.className = "on";

// cons[i].style.display = "block";//let 作用域会把每一轮的i保留

// };

// }

// 第三种

// for (var i = 0; i < lis.length; i++) {

// lis[i].onclick = function () {

// for (var j = 0; j < lis.length; j++) {

// if (this === lis[j]) {

// this.className = "on";

// cons[j].style.display = "block";

// } else {

// lis[j].className = "";

// cons[j].style.display = "none";

// }

// }

// };

// }

</script>

</html>

huijie_0716

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
JavaScript--选项卡

<!DOCTYPE html><html lang="en"> <head> <meta charset="UTF-8" /> <meta http-equiv="X-UA-Compatible" content="IE=edge" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> &...
复制链接

扫一扫