如何使用 JavaScript 创建水平和垂直标签？
2024-06-06 18:12:18
选项卡可用于以有组织的方式在单个页面上显示大量内容。我们可以使用 HTML、CSS 和 JavaScript 设计单页选项卡。HTML 元素用于设计选项卡的结构及其段落中的内容。样式是使用 CSS 执行的。单击每个选项卡按钮时，选项卡将显示其各自的内容。这是使用 JavaScript 完成的。
水平制表符：以下代码演示了带有制表符的简单 HTML 结构及其以段落形式的内容。单击每个选项卡时，它会调用下面给出的“script.js”文件中实现的displayContent()方法。
HTML 代码：
- HTML
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="style.css">
<script src="script.js"></script>
</head>
<body>
<h2 style="color:green">
GeeksforGeeks Horizontal tabs
</h2>
<!-- Link to each tab with onclick event -->
<div id="tabsDiv">
<button class="linkClass" onclick=
"displayContent(event, 'interview')">
Interview
</button>
<button class="linkClass" onclick=
"displayContent(event, 'practice')">
Practice
</button>
<button class="linkClass" onclick=
"displayContent(event, 'python')">
Python
</button>
<button class="linkClass" onclick=
"displayContent(event, 'algorithms')">
Algorithms
</button>
<button class="linkClass" onclick=
"displayContent(event, 'machine')">
Machine Learning
</button>
</div>
<!-- Content for each HTML tab -->
<div id="interview" class="contentClass">
<h3>Interview</h3>
<p>
Also, in Asymptotic analysis, we always
talk about input sizes larger than a
constant value. It might be possible
that those large inputs are never given
to your software and an algorithm which is
asymptotically slower, always performs
better for your particular situation.
So, you may end up choosing an algorithm
that is Asymptotically slower but faster
for your software.
</p>
</div>
<div id="practice" class="contentClass">
<h3>Practice</h3>
<p>
Asymptotic Analysis is the big idea
that handles above issues in analyzing
algorithms. In Asymptotic Analysis,
we evaluate the performance of an
algorithm in terms of input size (we
don’t measure the actual running time).
We calculate, how does the time
(or space) taken by an algorithm
increases with the input size.
</p>
</div>
<div id="python" class="contentClass">
<h3>Python</h3>
<p>
Python is a high-level, general-purpose
and a very popular programming language.
Python programming language (latest Python 3)
is being used in web development, Machine
Learning applications, along with all
cutting edge technology in Software Industry.
Python Programming Language is very well
suited for Beginners, also for experienced
programmers with other programming languages
like C++ and Java.
</p>
</div>
<div id="algorithms" class="contentClass">
<h3>Greedy Algorithms</h3>
<p>
Greedy is an algorithmic paradigm that
builds up a solution piece by piece,
always choosing the next piece that
offers the most obvious and immediate
benefit. So the problems where
choosing locally optimal also
leads to global solution are
best fit for Greedy.
</p>
</div>
<div id="machine" class="contentClass">
<h3>Machine Learning</h3>
<p>
Machine Learning is the field of
study that gives computers the capability
to learn without being explicitly
programmed. ML is one of the most
exciting technologies that one
would have ever come across.
As it is evident from the name,
it gives the computer that makes
it more similar to humans:
The ability to learn. Machine learning
is actively being used today,
perhaps in many more places than
one would expect.
</p>
</div>
</body>
</html>
|
CSS 代码：以下代码属于“style.css”文件，用于设置页面和选项卡的样式。
- css
<style>
h3 {
text-align: left;
}
/* Button to open the content */
.linkclass {
float: left;
cursor: pointer;
padding: 10px 15px 10px 10px;
background-color: light-grey;
}
/* Button styling on mouse hover */
#tabsDiv a:hover {
color: black;
background-color: #e9e9e9;
font-size: 16px;
}
/* Change the color of the button */
button.active {
background-color: #c0c0c0;
}
/* Content for button tabs*/
.contentClass {
display: none;
padding: 10px 16px;
border: 2px solid #c0c0c0;
}
</style>
|
JavaScript 代码：以下代码包含使用 JavaScript 的选项卡的功能。
- Javascript
function displayContent(event, contentNameID) {
let content =
document.getElementsByClassName("contentClass");
let totalCount = content.length;
// Loop through the content class
// and hide the tabs first
for (let count = 0;
count < totalCount; count++) {
content[count].style.display = "none";
}
let links =
document.getElementsByClassName("linkClass");
totalLinks = links.length;
// Loop through the links and
// remove the active class
for (let count = 0;
count < totalLinks; count++) {
links[count].classList.remove("active");
}
// Display the current tab
document.getElementById(contentNameID)
.style.display = "block";
// Add the active class to the current tab
event.currentTarget.classList.add("active");
}
|
输出：
垂直选项卡：可以通过更改 HTML 结构并将 CSS 样式表替换为用于垂直选项卡设计的修改后的样式表来使选项卡垂直。以下代码演示了垂直选项卡。
HTML 代码：
- HTML
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="vstyle.css">
<script src="script.js"></script>
</head>
<body>
<h2 style="color:green">
GeeksforGeeks Vertical tabs
</h2>
<div id="tabsDiv">
<div id="interview" class="contentClass">
<h3>Interview</h3>
<p>
Also, in Asymptotic analysis,
we always talk about input sizes larger
than a constant value. It might
be possible that those large inputs
are never given to your software and
an algorithm which is asymptotically
slower, always performs better for
your particular situation. So, you
may end up choosing an algorithm that
is Asymptotically slower but faster
for your software.
</p>
</div>
<div id="practice" class="contentClass">
<h3>Practice</h3>
<p>
Asymptotic Analysis is the big idea
that handles above issues in analyzing
algorithms. In Asymptotic Analysis, we
evaluate the performance of an algorithm
in terms of input size (we don’t measure
the actual running time). We calculate,
how does the time (or space) taken by
an algorithm increases with
the input size.
</p>
</div>
<div id="python" class="contentClass">
<h3>Python</h3>
<p>
Python is a high-level, general-purpose
and a very popular programming language.
Python programming language (latest Python 3)
is being used in web development, Machine
Learning applications, along with all
cutting edge technology in Software Industry.
Python Programming Language is very
well suited for Beginners, also for
experienced programmers with other
programming languages like C++ and Java.
</p>
</div>
<div id="algorithms" class="contentClass">
<h3>Greedy Algorithms</h3>
<p>
Greedy is an algorithmic paradigm
that builds up a solution piece by
piece,always choosing the next piece
that offers the most obvious and
immediate benefit. So the problems
where choosing locally optimal also
leads to global solution are best
fit for Greedy.
</p>
</div>
<ul class="ulClass" style="height:300px">
<li style="list-style-type:none;">
<button class="linkClass" onclick=
"displayContent(event, 'interview')">
Interview
</button>
</li>
<li style="list-style-type:none;">
<button class="linkClass" onclick=
"displayContent(event, 'practice')">
Practice
</button>
</li>
<li style="list-style-type:none;">
<button class="linkClass" onclick=
"displayContent(event, 'python')">
Python
</button>
</li>
<li style="list-style-type:none;">
<button class="linkClass" onclick=
"displayContent(event, 'algorithms')">
Algorithms
</button>
</li>
</ul>
</div>
</body>
</html>
|
CSS 代码：下面的代码是修改后的 CSS 代码，用于垂直标签显示。
- css
<style>
* {
box-sizing: border-box;
}
#tabsDiv {
height: 300px;
border: 2px solid #c0c0c0;
}
#tabsDiv ul {
height: 300px;
padding: 0px 5px;
}
#tabsDiv li {
width: 15%;
height: 60px;
}
#tabsDiv button {
float: left;
border: 1px solid #c0c0c0;
background-color: #f1f0f4;
}
/* Button to open the content */
#tabsDiv button {
display: block;
background-color: inherit;
color: black;
padding: 25px 15px;
width: 100%;
text-align: left;
cursor: pointer;
}
/* Button styling on mouse hover */
#tabsDiv button:hover {
background-color: #d1d1d1;
color: lime;
}
#tabsDiv button.active {
background-color: #c0c0c0;
}
/* Content for tabs*/
.contentClass {
display: none;
position: absolute;
left: 18%;
padding: 0px 15px;
width: 70%;
border-style: none;
height: 300px;
}
</style>
|
输出：
如何使用 JavaScript 创建水平和垂直标签？相关推荐
- 用SQL查询创建水平、垂直直方图
mysql> select * from t1; +--------+ | deptno | +--------+ | 10 | | 10 | | 10 | | 20 | | 20 | | 20 ...
- Java黑皮书课后题第8章：8.9（井字游戏）玩家使用各自标志标记3*3网格中的某个空格，当一个玩家在网格的水平、垂直或对角线方向标记了三个相同的标记时，游戏结束，该玩家获胜。创建一个玩井字游戏的程序
***8.9(井字游戏)玩家使用各自标志标记3*3网格中的某个空格,当一个玩家在网格的水平.垂直或对角线方向标记了三个相同的标记时,游戏结束,该玩家获胜.创建一个玩井字游戏的程序 题目 题目描述与运行 ...
- html p内容居中,html中如何让DIV标签中的P标签水平和垂直都居中？
html中如何让DIV标签中的P标签水平和垂直都居中? 让DIV标签中的P标签水平和垂直都居中 div { width:400px; height:300px; border:1px solid #6 ...
- D3.js 教程: 使用 JavaScript 创建可交互的柱状图
原文链接:D3.js Tutorial: Building Interactive Bar Charts with JavaScript 译者:OFED 最近,我们有幸参与了一个机器学习项目,该项目涉 ...
- jquery水平垂直居中_Java Web应用程序集成的jQuery UI选项卡（水平和垂直）示例
jquery水平垂直居中 jQuery UI is built on top of jQuery JavaScript Library to help web developers in creati ...
- 字体族、图标字体简介、图标字体的其他使用方式、IconFont、行高、字体的简写属性、文本的水平和垂直对齐、其他的文本样式——06fontbackground
目录 一.字体族 二.图标字体简介(font awesome的使用) 三.图标字体的其他使用方式 四.iconfont 五.行高 六.字体的简写属性 七.文本的水平和垂直对齐 八.其他的文本样式 九. ...
- 使用Python、OpenCV翻转图像（水平、垂直、水平垂直翻转）
使用Python.OpenCV翻转图像(水平.垂直.水平垂直翻转) 1. 效果图 2. 源码 参考 这篇博客将介绍如何使用Python.OpenCV翻转图像,类似于cv2.rotate(). 沿y轴水 ...
- div块内的CSS中心文本（水平和垂直）
我将div设置为display:block ( height和width 90px ),并且里面有一些文本. 我需要文本在垂直和水平方向上居中对齐. 我尝试了text-align:center ,但是 ...
- html自定义标签提示,用简单的jquery+CSS创建自定义的a标签title提示tooltip_HTML/Xhtml_网页制作...
简介 用简单的jquery+CSS创建自定义的a标签title提示,用来代替浏览器默认行为.如图: Javascript代码 代码如下: $(function() { $("a[title] ...
最新文章
- 服务器配置—开网站空间
- ES6-8 - 函数名/对象拓展、描述符、getter/setter
- [jQuery] 谈一下Jquery中的bind(),live(),delegate(),on()的区别？
- 计算机主板开机接线端子,装机必看，机箱前置面板接线向导，不怕再接错线了...
- LVM报错:resize2fs: Bad magic number in super-block
- 迅雷7核心技术Bolt界面引擎正式开放
- pert计算公式期望值_PERT网络分析法
- 计算机软件 已录制 是指啥,录像软件是什么？怎么录制电脑屏幕视频？
- 大数据预测模型的深度学习导论
- 【Auto.js教程】Auto.js入门及第一个示例程序
- 数据结构翻转课堂答疑实录——概述
- 【Linux 从入门到精通】第一篇 常见指令及初识权限
- Shell脚本循环语句及exit、continue和break用法
- A系统单点登录B系统
- 人机交互-1-人机交互概述
- java常见的5个异常_java常见的5种异常举例
- Python爬虫(5):豆瓣读书练手爬虫
- You are using pip version 9.0.1, however version 22.1.2 is available. You should consider upgrading
- 【Multisim仿真】TL494电路仿真 DC转DC 5V 1A输出
- 当机器有了“视力”，它会抢人类的饭碗并取代人类吗？