为什么单击按钮在我的 Javascript-html 中不起作用？

Question

我想做的是我在顶部有两个按钮，默认情况下显示法语，当我点击英语按钮时，它必须用法语替换英语（我正在使用隐藏和显示来这样做）。

但问题是 none 它们都无法通过单击按钮激活。下面是我的代码：

<!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>

有人可以告诉我这是什么原因吗？这是什么东西：

（单击法语按钮时必须替换用 "French" 编写的 "English" 文本）而我所拥有的是像这样：

不知道为什么？

Answer 1

您的脚本需要推迟...

<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>

Answer 2

reposition your script below the body tag or after the closing of the last div as shown. This will solve your issues

<!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>

Answer 3

只需替换以下代码行：

(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();
            });

        }
  });

为什么单击按钮在我的 Javascript-html 中不起作用？

Why button click don't work in my Javascript-html?

html

javascript

css

html-table

button