这是我在这里的第一篇文章,也是 html、css 和 js 的新手。
我目前在做一个游戏评测网站,在里面你可以把那些游戏看成卡片,你可以点击每张卡片查看完整评论(底部有试用笔)。
您根本不需要查看 CSS 或 HTML,JS 具有使搜索栏真正起作用的代码。
我之前很少有游戏(卡片),但现在我添加了更多游戏,我发现添加一个搜索字段很实用,人们可以在其中搜索他们想要的游戏名称,然后会出现包含相似性的卡片.我这样做了,效果很好,但它只搜索同一页面中的卡片。
您可以通过搜索来尝试搜索字段(只是为了看看它是否有效):
所以我的目标是实现一些事情,但我不知道如何去做:
1.搜索栏会查找所有游戏,无论它们是否在您搜索的同一页面中
2.如果没有找到,请在搜索栏中的“自动完成”上添加文本
3.。如果您在自动完成结果上用鼠标单击,则不会执行任何操作,因为它不会检测到键盘活动(使用键盘箭头工作)
4.在卡片上添加与搜索栏上显示的结果相同的结果
我什至不确定这一切是否可行,但我真的很感谢您的帮助!
先谢谢你。
/**/
function search_reviews() {
let input = document.getElementById('searchbar').value
input=input.toLowerCase();
let x = document.getElementsByClassName('grid-item');
for (i = 0; i < x.length; i++) {
if (!x[i].innerHTML.toLowerCase().includes(input)) {
x[i].style.display="none";
}
else {
x[i].style.display="";
}
}
}
/*Fuente para toda la web*/
@import url('https://fonts.googleapis.com/css2?family=Poppins:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap');
*{
font-family: 'Poppins', sans-serif !important;
}
/*Colores generales de la web*/
:root {
/*Común*/
--navbar: linear-gradient(to right, #D05050, #B43A3A);
--efecto-navbar: #881612;
--letrafooternavbar: white;
--dropdown: black;
--dropdown-hover: #D05050;
--dropdown-hover-text: white;
--fondo: white;
--letra: black;
--footer: linear-gradient(to right, #D05050, #B43A3A);
--botones-fondo: linear-gradient(to bottom right, #B74040, #992c2c);
--botones-border: linear-gradient(to bottom right, #B74040, #992c2c);
--botones-text: white;
--botones-hover: linear-gradient(to bottom right, #D05050, #B43A3A);
/*Especifico de página*/
--header: linear-gradient(to right, #D05050, #B43A3A);
--pagination-fondo: linear-gradient(to right, #D05050, #B43A3A);
--pagination-letra: black;
--pagination-letra-active: white;
--pagination-hover: lightgrey;
--card-background: white;
--card-text: black;
--card-shadow: #ccc;
--card-border: rgba(0,0,0,.125);
--label-cat-disabeled: lightgray;
--boton-cat-fondo: #b74040;
--boton-cat-hover: linear-gradient(to bottom, #D05050, #B43A3A);
--boton-cat-border: #8a0505;
--boton-cat-shadow1: #8a0505;
--boton-cat-shadow2: #ffe3e2;
--cat-fondo: #eee;
--cat-fondo-active: linear-gradient(to right, #D05050, #D05050);
--cat-text: black;
--cat-text-active: white;
--cat-hover: #ccc;
}
/*Colors darkmode*/
[data-theme=dark] {
/*Común*/
--navbar: #131313;
--efecto-navbar: #404040;
--letrafooternavbar: #d6d6d6;
--dropdown: #1d1d1d;
--dropdown-hover: #3c3c3c;
--dropdown-hover-text: #d6d6d6;
--fondo: #1d1d1d;
--letra: #d6d6d6;
--footer: #131313;
--botones-fondo: #131313;
--botones-border: #131313;
--botones-text: #d6d6d6;
--botones-hover: #0a0a0a;
/*Especifico de página*/
--header: #131313;
--pagination-fondo: #131313;
--pagination-letra: #d6d6d6;
--pagination-hover: #404040;
--card-background: #1d1d1d;
--card-text: #d6d6d6;
--card-shadow: black;
--card-border: #3d3d3d;
--label-cat-disabeled: #3d3d3d;
--boton-cat-fondo: #171717;
--boton-cat-hover: #1d1d1d;
--boton-cat-border: #3d3d3d;
--boton-cat-shadow1: #3d3d3d;
--boton-cat-shadow2: #171717;
--cat-fondo: #131313;
--cat-fondo-active: #343434;
--cat-text: #d6d6d6;
--cat-text-active: #d6d6d6;
--cat-hover: #343434;
}
/*Page loader*/
#loader {
width: 100%;
height: 100%;
top: 0;
left: 0;
position: fixed;
display: block;
opacity: 0.5;
background-color: transparent;
z-index: 99;
text-align: center;
}
#loader-image {
border: 12px solid lightgrey;
border-radius: 50%;
border-top: 12px solid #444444;
width: 70px;
height: 70px;
animation: spin 1s linear infinite;
}
@keyframes spin {
100% {
transform: rotate(360deg);
}
}
.centrarLoader {
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
margin: auto;
}
/*Estilo body*/
body {
background-color: var(--fondo);
color: var(--letra);
}
/*Estilo navbar*/
.navbar-area {
background: var(--navbar);
}
.site-navbar {
display: flex;
justify-content: space-between;
align-items: center;
font-weight: bold;
}
.site-navbar li:hover {
opacity: 50%;
}
.site-navbar li {
pointer-events: none;
}
.site-navbar a {
pointer-events: all;
}
a.site-logo {
font-size: 26px;
font-weight: 800;
text-transform: uppercase;
color: #fff;
text-decoration: none;
}
.site-navbar ul {
margin: 0;
padding: 0;
list-style: none;
display: flex;
}
.toggleDark {
font-style: normal;
color: var(--leta);
}
/*Dropdown en navbar (Extras)*/
.dropdown-content {
display: none;
position: absolute;
background-color: #f1f1f1;
min-width: 130px;
box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
z-index: 1;
}
.dropdown-content a:hover {
color: var(--dropdown-hover-text);
background-color: var(--dropdown-hover);
}
.dropdown-divider {
margin-top: -.1em;
}
.dropdown-content-2 {
min-height: 36px;
padding-top: 3px;
}
.dropdown-content a {
color: var(--dropdown);
padding: 12px 16px;
text-decoration: none;
display: block;
}
.dropdown:hover .dropdown-content {
display: block;
margin-left: -1em; /*Centrar dropdown*/
margin-top: .2em;
}
.invisible {
visibility: hidden;
}
.dropbtn {
background-color: transparent;
color: var(--letrafooternavbar);
font-weight: bold;
border: none;
padding-top: .6em;
padding-left: 1em;
padding-right: 1em;
}
/*Efecto hover circulos*/
.site-navbar ul li a {
color: var(--letrafooternavbar);
display: block;
text-decoration: none;
text-transform: uppercase;
}
ul.container {
margin: 0 auto;
padding: 1em 41.3em; /*Distancia elementos navbar (derecha)*/
text-align: center;
}
ul.container li {
color: var(--letrafooternavbar);
text-decoration: none;
font: 20px;
margin: 0px 10px;
padding: 10px 10px;
position: relative;
z-index: 0;
cursor: pointer;
}
ul.circleBehind li:before, ul.circleBehind li:after {
position: absolute;
top: 22px;
left: 50%;
width: 50px;
height: 50px;
border: 4px solid var(--efecto-navbar);
transform: translateX(-50%) translateY(-50%) scale(0.8);
border-radius: 50%;
background: transparent;
content: "";
opacity: 0;
transition: all 0.3s;
z-index: -1;
}
ul.circleBehind li:after {
border-width: 2px;
transition: all 0.4s;
}
ul.circleBehind li:hover:before {
opacity: 1;
transform: translateX(-50%) translateY(-50%) scale(1);
}
ul.circleBehind li:hover:after {
opacity: 1;
transform: translateX(-50%) translateY(-50%) scale(1.3);
}
/*Estilo del header*/
.header {
width: 100%;
padding:140px;
text-align: center;
background: var(--header);
color: var(--letrafooternavbar);
}
/*Estilo apartados de la web en home*/
.apartados {
padding-top: 40px;
}
.apartadosTitle {
padding-top: .3em;
}
.btn {
box-shadow: 0 0 0 rgba(0, 0, 0, 0) !important;
}
.btnHome {
color: var(--botones-text);
background: var(--botones-fondo);
border-color: var(--botones-border);
width: 10em;
height: 3em;
padding-top:10px;
text-transform: uppercase;
font-weight: 500;
}
.btnHome:hover {
color: var(--botones-text);
background: var(--botones-hover);
border-color: var(--botones-hover);
}
/*Estilo de paginación (usado en reviews)*/
ul.pagination {
display: inline-block;
padding: 0;
margin: 0;
font-size: 1.3em;
}
ul.pagination li {
display: inline;
}
ul.pagination li a {
color: var(--pagination-letra);
float: left;
padding: 8px 16px;
text-decoration: none;
}
ul.pagination li a.active {
background: var(--pagination-fondo);
color: var(--pagination-letra-active);
}
ul.pagination li a:hover:not(.active) {
background-color: var(--pagination-hover);
}
div.centerFooter {
padding-top: .5em;
text-align: center;
}
/*Estilo del footer*/
.footerMio {
margin-top: 2em;
background: var(--footer) !important;
}
.footerMio p {
color: var(--letrafooternavbar);
}
.footerMio h5 {
font-weight: bold;
color: var(--letrafooternavbar);
}
.footerList a {
color: var(--letrafooternavbar);
text-decoration: none;
text-transform: uppercase;
padding: 3px 3px;
position: relative;
z-index: 0;
cursor: pointer;
}
.footerList a:hover {
opacity: 50%;
}
.footerSocial {
padding-top: .5em;
}
.footerIcons {
max-width: 1.8em;
}
/*Estilo redes sociales footer*/
.footerimagerow {
display: inline-flex;
flex-wrap: wrap;
width: 75%;
margin-top: -.5em;
margin-left: -.15em;
z-index: 0;
}
.footerimagecolumn {
float: left;
flex: 10%;
background:url('') no-repeat 0 0;
z-index: 0;
}
.swap-on-hover img {
position: absolute;
}
.swap-on-hover .swap-on-hover__front-image {
z-index: 9999;
cursor: pointer;
}
.swap-on-hover:hover > .swap-on-hover__front-image{
opacity: 0;
}
.swap-on-hover2 img {
position: absolute;
}
.swap-on-hover2 .swap-on-hover__front-image2 {
z-index: 9999;
cursor: pointer;
}
.swap-on-hover2:hover > .swap-on-hover__front-image2{
opacity: 0;
}
.swap-on-hover3 img {
position: absolute;
}
.swap-on-hover3 .swap-on-hover__front-image3 {
z-index: 9999;
cursor: pointer;
}
.swap-on-hover3:hover > .swap-on-hover__front-image3{
opacity: 0;
}
.swap-on-hover4 img {
position: absolute;
}
.swap-on-hover4 .swap-on-hover__front-image4 {
z-index: 9999;
cursor: pointer;
}
.swap-on-hover4:hover > .swap-on-hover__front-image4{
opacity: 0;
}
.swap-on-hover5 img {
position: absolute;
}
.swap-on-hover5 .swap-on-hover__front-image5 {
z-index: 9999;
cursor: pointer;
}
.swap-on-hover5:hover > .swap-on-hover__front-image5{
opacity: 0;
}
/*Preview test juegos*/
.previesTestBody {
visibility: visible !important;
}
.previewTest {
cursor: default;
}
.previewTitleTest {
text-align: center;
vertical-align: middle;
color: var(--letra);
margin-top: 5.3em;
font-size: 5em;
}
/*Estilo del tag filter*/
.enabledLabel {
border-radius: 5px;
padding: 10px;
display: inline-block;
margin-top: 5px;
font-weight: 600;
color: white;
text-transform: uppercase;
padding: 1.25em 2em;
background: var(--boton-cat-hover);
border: 2px solid var(--boton-cat-border);
border-radius: 0.75em;
transform-style: preserve-3d;
transition: transform 150ms cubic-bezier(0, 0, 0.58, 1), background 150ms cubic-bezier(0, 0, 0.58, 1);
}
.disabledLabel {
border-radius: 5px;
padding: 10px;
display: inline-block;
margin-top: 5px;
font-weight: 600;
color: white;
text-transform: uppercase;
padding: 1.25em 2em;
background: var(--label-cat-disabeled);
border: 2px solid grey;
border-radius: 0.75em;
transform-style: preserve-3d;
transition: transform 150ms cubic-bezier(0, 0, 0.58, 1), background 150ms cubic-bezier(0, 0, 0.58, 1);
transform: translate(0em, 0.75em);
text-decoration: line-through;
text-decoration-thickness: 3px;
}
label.enabledLabel::before {
position: absolute;
content: "";
width: 100%;
height: 100%;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: var(--boton-cat-fondo);
border-radius: inherit;
box-shadow: 0 0 0 2px var(--boton-cat-shadow1), 0 0.625em 0 0 var(--boton-cat-shadow2);
transform: translate3d(0, 0.75em, -1em);
transition: transform 150ms cubic-bezier(0, 0, 0.58, 1), box-shadow 150ms cubic-bezier(0, 0, 0.58, 1);
}
label.enabledLabel:hover {
background: var(--boton-cat-hover);
transform: translate(0, 0.25em);
}
label.enabledLabel:hover::before {
box-shadow: 0 0 0 2px var(--boton-cat-shadow1), 0 0.5em 0 0 var(--boton-cat-shadow2);
transform: translate3d(0, 0.5em, -1em);
}
label.enabledLabel:active {
background: var(--boton-cat-hover);
transform: translate(0em, 0.75em);
}
label.enabledLabel:active::before {
box-shadow: 0 0 0 2px var(--boton-cat-shadow1), 0 0 var(--boton-cat-shadow2);
transform: translate3d(0, 0, -1em);
}
.fila1 {
width: auto;
height: auto;
display:inline-block;
padding-left: 7.2em;
padding-top: 1em;
}
.fila2 {
width: auto;
height: auto;
display:inline-block;
padding-left: 4.2em;
padding-top: 1em;
padding-bottom: 1em;
}
/*Gird cards*/
.grid-container {
display: grid;
grid-template-columns: auto auto auto;
padding: 10px;
}
.grid-item {
padding: 20px;
font-size: 30px;
text-align: center;
}
/*Estilo cards*/
.card {
border: 1px solid var(--card-border);
}
.card-title {
color: var(--card-text);
padding-top: 15px;
font-weight: bold;
}
.card-text {
font-size: 15px;
padding-left: 1em;
padding-right: 1em;
}
.card-filters {
font-size: 15px;
}
.card-filters::before {
content: 'Categoria/s: ';
font-weight: bold;
}
.card-shadow {
box-shadow: 10px 10px 5px var(--card-shadow);
transition: all 0.3s;
}
.card-shadow:hover {
transform: scale(1.05);
transition: all 0.3s;
}
.card-body {
padding: 0rem 0rem;
background-color: var(--card-background);
}
.btn {
border-radius: 0;
border-bottom-right-radius: .25rem;
border-bottom-left-radius: .25rem;
box-shadow: 10px 10px 5px var(--card-shadow);
}
.boton {
color: white;
background: var(--botones-fondo);
border-color: var(--botones-border);
width: 100%;
height: 3em;
padding-top:10px;
text-transform: uppercase;
font-weight: 500;
}
.boton:hover {
color: white;
background: var(--botones-hover);
border-color: var(--botones-hover);
}
.btn:focus {
outline: none;
box-shadow: none;
}
/*Efecto shine en card images*/
figure {
margin: 0;
padding: 0;
background: #fff;
overflow: hidden;
}
figure:hover+span {
bottom: -36px;
opacity: 1;
}
.shine figure {
position: relative;
}
.shine figure::before {
position: absolute;
top: 0;
left: -75%;
z-index: 2;
display: block;
content: '';
width: 50%;
height: 100%;
background: -webkit-linear-gradient(left, rgba(255,255,255,0) 0%, rgba(255,255,255,.3) 100%);
background: linear-gradient(to right, rgba(255,255,255,0) 0%, rgba(255,255,255,.3) 100%);
-webkit-transform: skewX(-25deg);
transform: skewX(-25deg);
}
.shine figure:hover::before {
-webkit-animation: shine .75s;
animation: shine .75s;
}
@-webkit-keyframes shine {
100% {
left: 125%;
}
}
@keyframes shine {
100% {
left: 125%;
}
}
/*Buscador*/
.buscador {
display: grid;
grid-template-columns: auto;
}
#searchbar{
margin-left: 2em;
margin-right: 2em;
padding: 15px;
border-radius: 10px;
border-width: 1.5px;
margin-top: 1em;
width: 96.8%;
}
<html>
<head>
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta1/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-giJF6kkoqNQ00vy+HMDP7azOuL0xtbfIcaT9wjKHr8RbDVddVHyTfAAsrekwKmP1" crossorigin="anonymous">
<link rel="preconnect" href="https://fonts.gstatic.com">
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@100;200;300;400;500;600;700;800;900&display=swap" rel="stylesheet">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <!-- Borrar al finalizar el testing -->
<script src="global.js"></script>
</head>
<body>
<!-- Navbar -->
<div class="navbar-area transparent">
<div class="container">
<nav class="site-navbar">
<a href="#" class="site-logo">logo</a>
</nav>
</div>
</div>
<!-- Buscador -->
<div class="buscador">
<input id="searchbar" onkeyup="search_reviews()" type="text" name="search" placeholder="Buscar reviews...">
</div>
<!-- Cards -->
<div class="grid-container">
<div class="grid-item">
<div class="card-shadow accion">
<div class="card shine">
<figure><img class="card-img-top" src="https://png.pngtree.com/back_origin_pic/00/01/44/8b4c243cf3026de20a451d05df6ee200.jpg" alt="Card image cap"></figure>
<div class="card-body">
<h5 class="card-title">GAME1</h5>
<p class="card-text">Aqui estaría la descripción y breve explicación de la card</p>
<p class="card-filters">test</p>
<a href="#" class="btn boton">Ver review</a>
</div>
</div>
</div>
</div>
<div class="grid-item">
<div class="card-shadow">
<div class="card shine">
<figure><img class="card-img-top" src="https://png.pngtree.com/back_origin_pic/00/01/44/8b4c243cf3026de20a451d05df6ee200.jpg" alt="Card image cap"></figure>
<div class="card-body">
<h5 class="card-title">NOT GAME2</h5>
<p class="card-text">Aqui estaría la descripción y breve explicación de la card</p>
<p class="card-filters">test</p>
<a href="#" class="btn boton">Ver review</a>
</div>
</div>
</div>
</div>
<div class="grid-item">
<div class="card-shadow">
<div class="card shine">
<figure><img class="card-img-top" src="https://png.pngtree.com/back_origin_pic/00/01/44/8b4c243cf3026de20a451d05df6ee200.jpg" alt="Card image cap"></figure>
<div class="card-body">
<h5 class="card-title">JUEGO1</h5>
<p class="card-text">Aqui estaría la descripción y breve explicación de la card</p>
<p class="card-filters">test</p>
<a href="#" class="btn boton">Ver review</a>
</div>
</div>
</div>
</div>
<div class="grid-item">
<div class="card-shadow">
<div class="card shine">
<figure><img class="card-img-top" src="https://png.pngtree.com/back_origin_pic/00/01/44/8b4c243cf3026de20a451d05df6ee200.jpg" alt="Card image cap"></figure>
<div class="card-body">
<h5 class="card-title">NOT JUEGO2</h5>
<p class="card-text">Aqui estaría la descripción y breve explicación de la card</p>
<p class="card-filters">test</p>
<a href="#" class="btn boton">Ver review</a>
</div>
</div>
</div>
</div>
<div class="grid-item">
<div class="card-shadow">
<div class="card shine">
<figure><img class="card-img-top" src="https://png.pngtree.com/back_origin_pic/00/01/44/8b4c243cf3026de20a451d05df6ee200.jpg" alt="Card image cap"></figure>
<div class="card-body">
<h5 class="card-title">GAMEING3</h5>
<p class="card-text">Aqui estaría la descripción y breve explicación de la card</p>
<p class="card-filters">test</p>
<a href="#" class="btn boton">Ver review</a>
</div>
</div>
</div>
</div>
<div class="grid-item">
<div class="card-shadow">
<div class="card shine">
<figure><img class="card-img-top" src="https://png.pngtree.com/back_origin_pic/00/01/44/8b4c243cf3026de20a451d05df6ee200.jpg" alt="Card image cap"></figure>
<div class="card-body">
<h5 class="card-title">JUEGO TEST3</h5>
<p class="card-text">Aqui estaría la descripción y breve explicación de la card</p>
<p class="card-filters">test</p>
<a href="#" class="btn boton">Ver review</a>
</div>
</div>
</div>
</div>
<div class="grid-item">
<div class="card-shadow">
<div class="card shine">
<figure><img class="card-img-top" src="https://png.pngtree.com/back_origin_pic/00/01/44/8b4c243cf3026de20a451d05df6ee200.jpg" alt="Card image cap"></figure>
<div class="card-body">
<h5 class="card-title">ALONE</h5>
<p class="card-text">Aqui estaría la descripción y breve explicación de la card</p>
<p class="card-filters">test</p>
<a href="#" class="btn boton">Ver review</a>
</div>
</div>
</div>
</div>
<div class="grid-item">
<div class="card-shadow">
<div class="card shine">
<figure><img class="card-img-top" src="https://png.pngtree.com/back_origin_pic/00/01/44/8b4c243cf3026de20a451d05df6ee200.jpg" alt="Card image cap"></figure>
<div class="card-body">
<h5 class="card-title">GAME TEST4</h5>
<p class="card-text">test</p>
<p class="card-filters">Individual, Terror, Puzzles</p>
<a href="#" class="btn boton">Ver review</a>
</div>
</div>
</div>
</div>
<div class="grid-item">
<div class="card-shadow">
<div class="card shine">
<figure><img class="card-img-top" src="https://png.pngtree.com/back_origin_pic/00/01/44/8b4c243cf3026de20a451d05df6ee200.jpg" alt="Card image cap"></figure>
<div class="card-body">
<h5 class="card-title">NOT NOT</h5>
<p class="card-text">Aqui estaría la descripción y breve explicación de la card</p>
<p class="card-filters">test</p>
<a href="#" class="btn boton">Ver review</a>
</div>
</div>
</div>
</div>
</div>
<!-- Pagination -->
<div class="centerFooter">
<ul class="pagination">
<li><a href="#">«</a></li>
<li><a href="#">1</a></li>
<li><a class="active" href="#">2</a></li>
<li><a href="#">3</a></li>
<li><a href="#">4</a></li>
<li><a href="#">5</a></li>
<li><a href="#">6</a></li>
<li><a href="#">7</a></li>
<li><a href="#">»</a></li>
</ul>
</div>
<!-- Footer -->
<footer class="bg-primary text-white text-center text-lg-start footerMio">
<div class="container p-4">
<div class="row">
<div class="col-lg-6 col-md-12 mb-4 mb-md-0">
<h5 class="text-uppercase">Contenido de la web</h5>
<p>
Lorem ipsum dolor sit amet consectetur, adipisicing elit. Iste atque ea quis
molestias. Fugiat pariatur maxime quis culpa corporis vitae repudiandae aliquam
voluptatem veniam, est atque cumque eum delectus sint!
</p>
</div>
<div class="col-lg-3 col-md-6 mb-4 mb-md-0">
<h5 class="text-uppercase">VER</h5>
<ul class="list-unstyled mb-0 footerList">
<li>
<a href="home.html" class="text-white">Home</a>
</li>
<li>
<a href="reviews1.html" class="text-white">Reviews</a>
</li>
<li>
<a href="juegos.html" class="text-white">Juegos</a>
</li>
<li>
<a href="redes.html" class="text-white">Redes</a>
</li>
</ul>
</div>
<div class="col-lg-3 col-md-6 mb-4 mb-md-0">
<h5 class="text-uppercase mb-0">REDES SOCIALES</h5>
<ul class="list-unstyled">
<li>
<a href="#!" class="text-white">Link 1</a>
</li>
<li>
<a href="#!" class="text-white">Link 2</a>
</li>
<li>
<a href="#!" class="text-white">Link 3</a>
</li>
<li>
<a href="#!" class="text-white">Link 4</a>
</li>
</ul>
</div>
</div>
</div>
<div class="text-center p-3" style="background-color: rgba(0, 0, 0, 0.2)">
© 2021 Copyright:
<a class="text-white" href="https://mdbootstrap.com/">MDBootstrap.com</a>
</div>
</footer>
<script>
//Botón pulsado categorias
var divSelected = null;
function SelectOrUnSelect(x) {
if (divSelected != null) divSelected.className = 'enabledLabel';
divSelected = document.getElementById(x);
document.getElementById(x).className = 'disabledLabel';
}
</script>
</body>
</html>