Question

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

但问题是它们都不起作用按钮点击envokes。以下是我的代码：

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

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

（在法语按钮上单击必须替换＆＃34;英语＆＃34;用＆＃34写的文本;法语＆＃34;）我所拥有的是什么像这样：

我不知道为什么？

Answer 1

将您的脚本重新定位在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>

Answer 2

您的脚本需要延期......

<script defer="defer">

...或者你的脚本需要低于它正在操纵的dom元素......

＆＃13;

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

＆＃13;

Answer 3

只需替换以下代码行：

＆＃13;

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

＆＃13;

通过以下行，它将起作用：

＆＃13;

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

＆＃13;

为什么按钮点击不能在我的Javascript-html中工作？

3 个答案: