创建一个单击选项卡

时间：2016-11-01 18:43:08

标签： javascript html

我正在尝试制作一个虚假而有趣的购买网站，我在那里销售有史以来最糟糕的游戏，但是，当人们点击游戏时，它应该打开带有游戏“描述”的标签，但它不会打开，它在屏幕顶部闪烁，不要停留。

代码：

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>

2 个答案:

答案 0 :(得分：3)

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

您可以在false上返回onclick来取消活动。

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

＆＃13;
＆＃13; 
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();
	}
}
＆＃13; 
.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;
}
＆＃13; 
<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>
＆＃13;
＆＃13;
＆＃13;

答案 1 :(得分：1)

点击您的页面重新加载。

所以只需在href标签中添加 javascript：或 javascript：void（0）。

并在 onclick 事件中返回 false 取消重新加载事件。

相关问题
最新问题