來源： 創業寶 發表時間：2024-04-19 16:27:30 熱度：17
原標題：響應式的翻牌遊戲
html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>翻牌遊戲</title>
<link rel="stylesheet" href="https://i-jay.com/bootstrap/3.4.1/css/bootstrap.min.css">
</head>
<body>
<div class="container">
<h2>翻牌遊戲</h2>
<div class="row">
<div class="col-md-6">
<button class="btn btn-block btn-primary" onclick="flipCard('card1')">翻牌</button>
<div id="card1" class="card hidden">
<div class="card-content">
<p>牌面內容</p>
</div>
</div>
</div>
<div class="col-md-6">
<button class="btn btn-block btn-primary" onclick="flipCard('card2')">翻牌</button>
<div id="card2" class="card hidden">
<div class="card-content">
<p>另一張牌面內容</p>
</div>
</div>
</div>
</div>
</div>
<style>
.card {
border: 1px solid #ccc;
padding: 10px;
margin-top: 10px;
}
.hidden {
display: none;
}
</style>
<script>
function flipCard(cardId) {
var card = document.getElementById(cardId);
card.classList.toggle('hidden');
}
</script>
</body>
</html>
標題：響應式的翻牌遊戲
地址：https://www.vogueseek.com/post/61785.html
鄭重聲明：本文版權歸原作者所有，轉載文章僅為傳播信息之目的，不構成任何投資建議，如有侵權行為，請第一時間聯絡我們修改或刪除，多謝。
