所以我正在为一项任务创造一个游戏创意，我想锁定第二个和第三个主菜单按钮，直到它们按顺序完成游戏，只是为了让人们使用动画/游戏的方式有一些额外的结构，我们正在使用 css 动画，所以所有内容都在一页 html 文档和一个 js 文件中。
这里是HTML代码：
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Meltdown</title>
<!-- makes browsers render all elements more consistently. Similar to a CSS reset file -->
<link rel="stylesheet" href="css/normalize.css">
<!-- the main style sheet you should edit -->
<link rel="stylesheet" href="css/style.css">
<!-- link to PT-Sans font from google fonts -->
<link href='http://fonts.googleapis.com/css?family=PT+Sans' rel='stylesheet' type='text/css'>
<!-- link to local version of jQuery -->
<script src="js/jquery-1.11.0.min.js"></script>
<!-- Link to javascript file -->
<script src="js/script.js"></script>
<!-- Link to JQuery Library and UI -->
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.5.0/jquery.min.js"></script>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.8.9/jquery-ui.min.js"></script>
<meta name="apple-mobile-web-app-capable" content="yes">
</head>
<body>
<!-- main page wrap for the interactive -->
<div id="main-container">
<!-- container for all the individual pages -->
<div class="pages">
<!-- ========================= INTRO =========================== -->
<div class="page-intro current">
<!--HOME PAGE-->
<div class="home-page">
<div id="home-img"></div>
<div id="volume-slider">
<input type="range" min="0" max="100" value="50" class="slider">
</div>
<!--Trees-->
<div class="tree"></div>
<div class="tree2"></div>
<div class="tree3"></div>
<!--Title-->
<div class="title"></div>
<!--Steam-->
<div class="steam"></div>
<!--Interacables-->
<div class="intro-button">START</div>
<!--Introduction-->
<div class="nuclear-icon"></div>
<div class="nuclear-icon-two"></div>
</div>
</div>
<!-- ========================= MENU =========================== -->
<div class="page-menu">
<h1>Main Menu</h1>
<div class="menu1-button button">
Start study now!
</div>
<div class="menu2-button button" disabled>
Multiple choice!
</div>
<div class="menu3-button button" disabled>
Fix the circuit!
</div>
</div> <!-- menu page -->
<!-- ========================= OTHER PAGES =========================== -->
<div class="page-study">
<h1>Learning the basics</h1>
<div class="p1-button button">
Multiple choice!
</div>
<div class="text-box box1">
<h1>Key points</h1>
<ul>
<li>Circuit diagrams are used to show how electrical <span class="important">components</span> are connected in a <span class="important">circuit.</span></li>
<li>Individual circuit components are represented using circuit symbols.</li>
<li>Ammeters are used to measure the <span class="important">current</span> flowing through components. Voltmeters are used to measure the <span class="important">potential difference</span> across components.</li>
</ul>
</div>
<div class="text-box box2">
<h2>Circuit symbols</h2>
<p>Electrical components, like motors and lamps, can be connected together to form a circuit.</p>
<p>A circuit diagram shows how the components are connected.</p>
<p>straight lines to show the wires andcircuit symbols to represent each component.</p>
</div>
<button class="reveal-more">Click me!</button>
<div class="text-box box3">
<h1>Cells</h1>
<p>Cells provide the energy for many electrical devices to function - like torches, mobile phones and laptops. Cells come in different sizes and shapes.</p>
<p>The most common type of cell is the electrochemical cell which uses chemical reactions to transfer energy.</p>
</div>
<div class="text-box box4">
<h2>Potential Difference</h2>
<p>Potential difference is the amount of energy transferred by each unit of charge passing between two points of a circuit.</p>
<p>The unit of potential difference is the volt. The symbol for volts is V. A potential difference of 1.5 volts can be written as 1.5 V.</p>
<p>Potential difference is also commonly called 'voltage'.</p>
</div>
<button class="continue-button">Next</button>
<div class="p-menu-button button">
Go back to menu
</div>
</div>
<!-- Multiple Choice Page -->
<div class="page-multiple-choice">
<div id="beginning-screen-quiz">
<h1 id="heading-quiz">Oh no! it looks like you have been locked out of the computer system. You will have to take this quiz in order to regain access, you must get a score of 60 in order to bypass the security system.</h1>
<button id="start-button-quiz">Hack into security</button>
</div>
<h1>Multiple Choice Quiz</h1>
<div class="p2-button button">
Fix the circuit
</div>
<div class="p-menu-button button">
Go back to menu
</div>
<div id="wrapper">
<div id="question">Sample question here</div>
<div id="answersAndFeedback">
<div id="answer1" class="answer-box">Answer 1</div>
<div id="answer2" class="answer-box">Answer 2</div>
<div id="answer3" class="answer-box">Answer 3</div>
<div id="feedback" class="hidden">Feedback goes here</div>
</div>
<div class="score">0</div>
<div id="next-btn" class="hidden">next</div>
<div id="game-over" class="hidden">Congratulations! Continue to the next page!</div>
</div>
</div>
<!-- Circuit Page -->
<div class="page-circuit">
<div id="beginning-screen">
<h1 id="heading">Quickly, the reactor has blown a circuit. You are the last chance at saving this power plant, in order to save us all, you have to correctly place all the symbols in the correct slots.</h1>
<button id="start-button">Save the Power Plant</button>
</div>
<h1 id="circuit-text">Fix the circuit</h1>
<div class="p-menu-button button">
Go back to menu
</div>
<div class="container">
<img id="drag1" src="img/voltmeter.svg" alt="Draggable Image 1">
<img id="drag2" src="img/fixed-resistor.svg" alt="Draggable Image 2">
<div id="drop">Drop Here</div>
</div>
<div class="container2">
<img id="drag3" src="img/bulb.svg" alt="Draggable Image 1">
<img id="drag4" src="img/variable-resistor.svg" alt="Draggable Image 2">
<div id="drop2">Drop Here</div>
</div>
<div class="container3">
<img id="drag5" src="img/battery.svg" alt="Draggable Image 1">
<img id="drag6" src="img/closed-switch.svg" alt="Draggable Image 2">
<div id="drop3">Drop Here</div>
</div>
<div class="incomplete-circuit">
</div>
<div id="end-screen">
<h1 id="heading">Congratulations, you have finished, you have saved the power plant from exploding! You are a Hero!</h1>
<button id="back-to-start-button">Back to Start</button>
</div>
</div>
</div> <!-- end of pages -->
<!-- add any containers here that you don't want to animate when pages transition -->
<div class="persistent-stuff">
</div>
</div> <!-- end of main container -->
</body>
</html>
所以我希望
<div class="menu2-button button">Multiple choice!</div><div class="page-study"><div class="p1-button button">Multiple choice!</div><div class="menu3-button button">Fix the circuit!</div><div class="page-multiple-choice"><div class="p2-button button">Fix the circuit</div>这里是与这些元素相关的当前功能。
// --------------------------- Menu Page -------------------------------------
$('.menu1-button').click(function(){
transition(".page-study","fade");
});
$('.menu2-button').click(function(){
transition(".page-multiple-choice","fade");
});
$('.menu3-button').click(function(){
transition(".page-circuit","fade");
});
// --------------------------- Study Page -------------------------------------
$('.p1-button').click(function(){
transition(".page-multiple-choice","push-left");
});
$('.p2-button').click(function(){
transition(".page-circuit","push-right");
});
$('.p-menu-button').click(function(){
transition(".page-menu","fade");
});
任何帮助将不胜感激，因为这是我为了完成它需要完成的最后一件主要事情之一:)
我尝试向 .disabled 的按钮添加一个类，它应用了 onclick=false，然后是一个 .enable 类，在按钮上有 onclick=true，但它最终阻止了我按下任何按钮在屏幕上。