创建一个点击选项卡

Creating a on-click tab

本文关键字：选项 一个 创建      更新时间：2023-09-26

我试图制作一个虚假和有趣的购买网站，在那里我卖的是最糟糕的游戏，但是，当人们点击游戏时，它应该打开一个带有游戏"描述"的标签，但它没有打开，它在屏幕顶部闪烁，并没有停留。

代码:

function OpenGame(jogo) {
	if (jogo == "Rambo"){
		document.getElementById("game-info").innerHTML = "<h1>RAMBO</h1>";
		document.getElementById("game-info").className += "info";
		document.getElementById("content").className += "info";
		document.getElementById("game-info").focus();
	}
}
.prod {
	width: 80%;
	height: 80%;
	border: 2px solid black;
	transition: 0.5s ease;
	position: relative;
}
.prod:hover {
	box-shadow: 0px 0px 25px #696969;
	transition: 0.5s ease;
	filter: grayscale(1);
}
.img {
	position: absolute;
	width: 100%;
	height: 100%;
}
.tabelinha {
	width: 100%; 
	height: 100%;
}
td {
	width: 20%;
}
.trzinhu {
	height: 500px;
}
html {
	background-image: url("../BG/BG_Str.png");
}
.content {
	z-index: 100;
}
.content:info {
	z-index: -1;
	filter: blur(10px);
}
.game {
	position: absolute;
	width: 90%;
	height: 100%;
	z-index: -1;
	background-color: white;
	box-shadow: 0px 0px 25px #696969;
	transition: 0.5s ease;
	opacity: 0;	
}
.game:info {
	opacity: 1;
	z-index: 100;
}
<script src="http://www.w3schools.com/lib/w3data.js"></script>
<html>
<head>
<meta charset="UTF-8">
<title> Compras ®</title>
<script src="Utils/w3data.js"></script>
<link rel="stylesheet" href="Styles/Menu.css" type="text/css">
<link rel="stylesheet" href="Styles/Compras.css" type="text/css">
<script src="Utils/CookieManager.js"></script>
</head>
<body>
<center><div class="game" id="game-info"></div></center>
<div class="content" id="content">
<div w3-include-html="Utils/Menu.html"></div>
<br>
<div class="carrinho">
<a class="carrinho_nome">Itens no carrinho: </a>
<a class="itens" id="itens">0</a>
</div>
<br><br>
<table class="tabelinha">
<tr class="trzinhu">
<td>
<div class="prod">
<a onclick="OpenGame('Rambo')" href=""><img class="img" src="Jogos/Rambo_The_Videogame.jpg"></a>
</div>
</td><td>
<div class="prod">
<a onclick="OpenGame('NMS')" href=""><img class="img" src="Jogos/No_Mans_Sky.jpg"></a>
</div>
</td><td>
<div class="prod">
<img class="img" src="Jogos/Envolve.jpg">
</div>
</td><td>
<div class="prod">
<img class="img" src="Jogos/Bo_3.jpg">
</div>
</td></tr><tr class="trzinhu"><td>
<div class="prod">
<img class="img" src="Jogos/Nox.jpg">
</div>
</td><td>
<div class="prod">
<img class="img" src="Jogos/Cod_IW.jpg">
</div>
</td><td>
<div class="prod">
<img class="img" src="Jogos/BF_H.jpg">
</div>
</td><td>
<div class="prod">
<img class="img" src="Jogos/Cod_G.jpg">
</div>
</td></tr><tr class="trzinhu"><td>
<div class="prod">
<img class="img" src="Jogos/Just_Dance.jpg">
</div>
</td><td>
<div class="prod">
<img class="img" src="Jogos/cod_AW.jpg">
</div>
</td><td>
<div class="prod">
<img class="img" src="Jogos/The_Order.jpg">
</div>
</td><td>
<div class="prod">
<img class="img" src="Jogos/mine.jpg">
</div>
</td></tr><tr class="trzinhu"><td>
<div class="prod">
<img class="img" src="Jogos/Dia_Z.jpg">
</div>
</td><td>
<div class="prod">
<img class="img" src="Jogos/h1z1.jpg">
</div>
</td><td>
<div class="prod">
<img class="img" src="Jogos/Farm.jpeg">
</div>
</td><td>
<div class="prod">
<img class="img" src="Jogos/ets2.jpeg">
</div>
</td></tr>
</table>
<script>
w3IncludeHTML();
</script>
</div>
</body>
</html>

这是因为点击<a>后页面会重新加载。

可以通过在onclick上返回false来取消事件。

<a onclick="OpenGame('Rambo'); return false;" href="">


function OpenGame(jogo) {
	if (jogo == "Rambo"){
		document.getElementById("game-info").innerHTML = "<h1>RAMBO</h1>";
		document.getElementById("game-info").className += "info";
		document.getElementById("content").className += "info";
		document.getElementById("game-info").focus();
	}
}
.prod {
	width: 80%;
	height: 80%;
	border: 2px solid black;
	transition: 0.5s ease;
	position: relative;
}
.prod:hover {
	box-shadow: 0px 0px 25px #696969;
	transition: 0.5s ease;
	filter: grayscale(1);
}
.img {
	position: absolute;
	width: 100%;
	height: 100%;
}
.tabelinha {
	width: 100%; 
	height: 100%;
}
td {
	width: 20%;
}
.trzinhu {
	height: 500px;
}
html {
	background-image: url("../BG/BG_Str.png");
}
.content {
	z-index: 100;
}
.content:info {
	z-index: -1;
	filter: blur(10px);
}
.game {
	position: absolute;
	width: 90%;
	height: 100%;
	z-index: -1;
	background-color: white;
	box-shadow: 0px 0px 25px #696969;
	transition: 0.5s ease;
	opacity: 0;	
}
.game:info {
	opacity: 1;
	z-index: 100;
}
<script src="http://www.w3schools.com/lib/w3data.js"></script>
<html>
<head>
<meta charset="UTF-8">
<title> Compras ®</title>
<script src="Utils/w3data.js"></script>
<link rel="stylesheet" href="Styles/Menu.css" type="text/css">
<link rel="stylesheet" href="Styles/Compras.css" type="text/css">
<script src="Utils/CookieManager.js"></script>
</head>
<body>
<center><div class="game" id="game-info"></div></center>
<div class="content" id="content">
<div w3-include-html="Utils/Menu.html"></div>
<br>
<div class="carrinho">
<a class="carrinho_nome">Itens no carrinho: </a>
<a class="itens" id="itens">0</a>
</div>
<br><br>
<table class="tabelinha">
<tr class="trzinhu">
<td>
<div class="prod">
<a onclick="OpenGame('Rambo'); return false;" href=""><img class="img" src="Jogos/Rambo_The_Videogame.jpg"></a>
</div>
</td><td>
<div class="prod">
<a onclick="OpenGame('NMS'); return false;" href=""><img class="img" src="Jogos/No_Mans_Sky.jpg"></a>
</div>
</td><td>
<div class="prod">
<img class="img" src="Jogos/Envolve.jpg">
</div>
</td><td>
<div class="prod">
<img class="img" src="Jogos/Bo_3.jpg">
</div>
</td></tr><tr class="trzinhu"><td>
<div class="prod">
<img class="img" src="Jogos/Nox.jpg">
</div>
</td><td>
<div class="prod">
<img class="img" src="Jogos/Cod_IW.jpg">
</div>
</td><td>
<div class="prod">
<img class="img" src="Jogos/BF_H.jpg">
</div>
</td><td>
<div class="prod">
<img class="img" src="Jogos/Cod_G.jpg">
</div>
</td></tr><tr class="trzinhu"><td>
<div class="prod">
<img class="img" src="Jogos/Just_Dance.jpg">
</div>
</td><td>
<div class="prod">
<img class="img" src="Jogos/cod_AW.jpg">
</div>
</td><td>
<div class="prod">
<img class="img" src="Jogos/The_Order.jpg">
</div>
</td><td>
<div class="prod">
<img class="img" src="Jogos/mine.jpg">
</div>
</td></tr><tr class="trzinhu"><td>
<div class="prod">
<img class="img" src="Jogos/Dia_Z.jpg">
</div>
</td><td>
<div class="prod">
<img class="img" src="Jogos/h1z1.jpg">
</div>
</td><td>
<div class="prod">
<img class="img" src="Jogos/Farm.jpeg">
</div>
</td><td>
<div class="prod">
<img class="img" src="Jogos/ets2.jpeg">
</div>
</td></tr>
</table>
<script>
w3IncludeHTML();
</script>
</div>
</body>
</html>

你的页面在点击时重新加载。

所以只需添加javascript:或javascript:void(0)在href tag of .

在onclick事件上返回false来取消重新加载事件。
相关文章：