為什么按鈕單擊在我的Javascript-html中不起作用？
[英]Why button click don't work in my Javascript-html?
問題描述
我想做的是在頂部有兩個按鈕，默認情況下顯示法語，當我單擊英語按鈕時，它必須用法語替換英語（我正在使用隱藏和顯示操作）。
但是問題是它們都不起作用，按鈕單擊也不會起作用。 下面是我的代碼：
<!DOCTYPE html>
<html>
<head>
<script src="//code.jquery.com/jquery.min.js"></script>
<link href="//netdna.bootstrapcdn.com/twitter-bootstrap/2.3.2/css/bootstrap-combined.min.css" rel="stylesheet" type="text/css" />
<script src="//netdna.bootstrapcdn.com/twitter-bootstrap/2.3.2/js/bootstrap.min.js"></script>
<script src="//code.jquery.com/jquery-2.1.1.min.js"></script>
<meta charset="utf-8" />
<title>JS Bin</title>
<script>
(function ()
{
$(".frc-tab").show();
$(".eng-tab").hide();
alert('check')
$('.eng').on('click', function (event)
{
alert('eng click');
$('.eng-tab').show();
$('.frc-tab').hide();
});
$('.frc').on('click', function (event)
{
alert('french click');
$('.eng-tab').hide();
$('.frc-tab').show();
});
})();
</script>
</head>
<body>
<div>
<button class="eng">english</button>
<button class="frc">french</button>
</div>
<div class="eng-tab">
<table class="table table-bordered">
<tr>
<td>english</td>
</tr>
</table>
</div>
<div class="frc-tab">
<table class="table table-bordered">
<tr>
<td>french</td>
</tr>
</table>
</div>
</body>
</html>
有人可以讓我知道原因嗎？ 這是什么東西：
（在法語按鈕上單擊必須替換為用“法語”書寫的“英語”文本），我所擁有的是這樣的：
不知道為什么
3 個解決方案
解決方案1
2 2015-04-29 04:52:30
如圖所示，將腳本重新定位在body標簽下方或最后一個div關閉之后。 這樣可以解決您的問題
<!DOCTYPE html>
<html>
<head>
<script src="//code.jquery.com/jquery.min.js"></script>
<link href="//netdna.bootstrapcdn.com/twitter-bootstrap/2.3.2/css/bootstrap-combined.min.css" rel="stylesheet" type="text/css" />
<script src="//netdna.bootstrapcdn.com/twitter-bootstrap/2.3.2/js/bootstrap.min.js"></script>
<script src="//code.jquery.com/jquery-2.1.1.min.js"></script>
<meta charset="utf-8" />
<title>JS Bin</title>
</head>
<body>
<div>
<button class="eng">english</button>
<button class="frc">french</button>
</div>
<div class="eng-tab">
<table class="table table-bordered">
<tr>
<td>english</td>
</tr>
</table>
</div>
<div class="frc-tab">
<table class="table table-bordered">
<tr>
<td>french</td>
</tr>
</table>
</div>
<script>
(function ()
{
$(".frc-tab").show();
$(".eng-tab").hide();
alert('check')
$('.eng').on('click', function (event)
{
alert('eng click');
$('.eng-tab').show();
$('.frc-tab').hide();
});
$('.frc').on('click', function (event)
{
alert('french click');
$('.eng-tab').hide();
$('.frc-tab').show();
});
})();
</script>
解決方案2
1 已采納 2015-04-29 04:47:49
您的腳本要么需要推遲...
<script defer="defer">
...或者您的腳本需要位於要操作的dom元素之下...
<!DOCTYPE html> <html> <head> <script src="//code.jquery.com/jquery.min.js"></script> <link href="//netdna.bootstrapcdn.com/twitter-bootstrap/2.3.2/css/bootstrap-combined.min.css" rel="stylesheet" type="text/css" /> <script src="//netdna.bootstrapcdn.com/twitter-bootstrap/2.3.2/js/bootstrap.min.js"></script> <script src="//code.jquery.com/jquery-2.1.1.min.js"></script> <meta charset="utf-8" /> <title>JS Bin</title> </head> <body> <div> <button class="eng">english</button> <button class="frc">french</button> </div> <div class="eng-tab"> <table class="table table-bordered"> <tr> <td>english</td> </tr> </table> </div> <div class="frc-tab"> <table class="table table-bordered"> <tr> <td>french</td> </tr> </table> </div> <script> (function () { $(".frc-tab").show(); $(".eng-tab").hide(); alert('check') $('.eng').on('click', function (event) { alert('eng click'); $('.eng-tab').show(); $('.frc-tab').hide(); }); $('.frc').on('click', function (event) { alert('french click'); $('.eng-tab').hide(); $('.frc-tab').show(); }); })(); </script> </body> </html>
解決方案3
1 2015-04-29 04:58:41
只需替換下面的代碼行：
(function () { $(".frc-tab").show(); $(".eng-tab").hide(); alert('check') $('.eng').on('click', function (event) { alert('eng click'); $('.eng-tab').show(); $('.frc-tab').hide(); }); $('.frc').on('click', function (event) { alert('french click'); $('.eng-tab').hide(); $('.frc-tab').show(); }); })();
通過以下行，它將起作用：
$(document).ready(function() { { $(".frc-tab").show(); $(".eng-tab").hide(); alert('check') $('.eng').on('click', function (event) { alert('eng click'); $('.eng-tab').show(); $('.frc-tab').hide(); }); $('.frc').on('click', function (event) { alert('french click'); $('.eng-tab').hide(); $('.frc-tab').show(); }); } });
為什么我的Java語言中的extend（）方法不能用於3個或更多對象？
[英]Why my extend() method in Javascript don't work for 3 and more objects?
為什么這些 Javascript 換行技術在我的瀏覽器中不起作用？
[英]Why don't these Javascript line break techniques work in my browser?
聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.