Почему кнопка click не работает в моем Javascript-html?

То, что я пытаюсь сделать, это то, что у меня есть две кнопки вверху, которые по умолчанию показывают французский язык, и когда я нажимаю на английскую кнопку, он должен заменить английский по-французски (я использую hide и show для этого).Почему кнопка click не работает в моем 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>

Может кто-то пожалуйста, дайте мне знать причину этого? Что-то вроде этого:

(который на французском нажатием кнопки необходимо заменить «английский» текст, написанный с «французский») и то, что у меня есть что-то так:

Я не знаю почему?

источник

2015-04-29 testing Test

Ваш скрипт либо должно быть отложено ...

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

источник

2015-04-29 04:47:49

Этот HTML не неверны, '' тег закрывается внутри тела. – Cristik

ваши права, я забыл проверить –

переместите свой сценарий под тегом тела или после закрытия последнего 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>

источник

2015-04-29 04:52:30

. Для справки это связано с тем, что вы вызывали функцию самозапуска, прежде чем документ завершил загрузку. И поэтому имена классов и селекторов неизвестны сценарию. Надеюсь, что это помогло –

просто заменить следующие строки кода:

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

 
     } 
 
\t \t });

источник

2015-04-29 04:58:41

Почему кнопка click не работает в моем Javascript-html?

ответ

Смежные вопросы