javascript - 单选按钮单击是显示英语并单击不显示孟加拉语

Question

我想使用自定义翻译器翻译我的页面。当我选择 Bangla 按钮时，整个页面都会翻译成孟加拉语，当我点击英语时，整个页面会返回原始语言英语。

默认显示英文 div 内容，但当我单击 Bangla 时，它仅显示 bangla div 内容并隐藏英文 Div 内容，当我还单击英文时，Bangla div 内容隐藏并仅显示英文 div 内容。

这是 HTML 代码:

   .switch-field {
   font-family: "Lucida Grande", Tahoma, Verdana, sans-serif;
   padding: 0px;
   overflow: hidden;
   }

   .switch-title {
   margin-bottom: 6px;
   }

   .switch-field input {
   position: absolute !important;
   clip: rect(0, 0, 0, 0);
   height: 1px;
   width: 1px;
   border: 0;
   overflow: hidden;
   }

   .switch-field label {
   float: left;
   }

   .switch-field label {
   display: inline-block;
   width: 80px;
   background-color: #e4e4e4;
   color: rgba(0, 0, 0, 0.6);
   font-size: 14px;
   font-weight: normal;
   text-align: center;
   text-shadow: none;
   padding: 6px 14px;
   border: 1px solid rgba(0, 0, 0, 0.2);
   -webkit-box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.3), 0 1px rgba(255, 255, 255, 0.1);
   box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.3), 0 1px rgba(255, 255, 255, 0.1);
   -webkit-transition: all 0.1s ease-in-out;
   -moz-transition:    all 0.1s ease-in-out;
   -ms-transition:     all 0.1s ease-in-out;
   -o-transition:      all 0.1s ease-in-out;
   transition:         all 0.1s ease-in-out;
   }

   .switch-field label:hover {
   cursor: pointer;
   }

   .switch-field input:checked + label {
   background-color: #8dd400;
   color:#FFFFFF;
   -webkit-box-shadow: none;
   box-shadow: none;
   }

   .switch-field label:first-of-type {
   border-radius: 4px 0 0 4px;
   }

   .switch-field label:last-of-type {
   border-radius: 0 4px 4px 0;
   }

   <!--LANGUAGE SELECTOR-->

   <div align="left">
		
				<div class="switch-field">
				  <div class="switch-title">Select Language :</div>
				  <input type="radio" id="switch_left" name="switch_2" value="yes" checked/>
				  <label for="switch_left">English</label>
				  <input type="radio" id="switch_right" name="switch_2" value="no" />
				  <label for="switch_right">বাংলা</label>
				</div>

			</div>

  <!--LANGUAGE Translate -->
</br>

  <div id="en_USA_lan">
  What would you like to list?
  </div>      

  <div id="bn_BD_lan">
  আপনি কি লিস্ট করতে চান ?
  </div>

 <!--LANGUAGE Translate -->


 <!--LANGUAGE SELECTOR-->

我正在尝试使用切换，但无法获得我想要的结果。

   <script>

    $(document).ready(
    function() {
        $("#switch_left").click(function() {
            $("#switch_right_view").fadeToggle();
        });
    });

    $(document).ready(
    function() {
        $("#switch_right").click(function() {
            $("#switch_right_view").fadeToggle();
        });
    });

</script>

<style>

    #switch_right_view {
            display: none;
            }
</style>

感谢大家对 api 元素的帮助。

Answer 1

将您的脚本更新为以下内容，它应该可以正常工作。(不要忘记添加 jQuery。)

编辑:使用类而不是 ID 的工作代码段。

$(document).ready(function() {
   $(".bn_BD_lan").hide();

   $("#switch_right").click(function() {
      $(".en_USA_lan").hide();
      $(".bn_BD_lan").show();
   });
   $("#switch_left").click(function() {
      $(".en_USA_lan").show();
      $(".bn_BD_lan").hide();
   });    
});

/* Do not worry Just minified your css to reduce space. */

.switch-field{font-family:"Lucida Grande",Tahoma,Verdana,sans-serif;padding:0;overflow:hidden}.switch-title{margin-bottom:6px}.switch-field input{position:absolute!important;clip:rect(0,0,0,0);height:1px;width:1px;border:0;overflow:hidden}.switch-field label{float:left;display:inline-block;width:80px;background-color:#e4e4e4;color:rgba(0,0,0,.6);font-size:14px;font-weight:400;text-align:center;text-shadow:none;padding:6px 14px;border:1px solid rgba(0,0,0,.2);-webkit-box-shadow:inset 0 1px 3px rgba(0,0,0,.3),0 1px rgba(255,255,255,.1);box-shadow:inset 0 1px 3px rgba(0,0,0,.3),0 1px rgba(255,255,255,.1);-webkit-transition:all .1s ease-in-out;-moz-transition:all .1s ease-in-out;-ms-transition:all .1s ease-in-out;-o-transition:all .1s ease-in-out;transition:all .1s ease-in-out}.switch-field label:hover{cursor:pointer}.switch-field input:checked+label{background-color:#8dd400;color:#FFF;-webkit-box-shadow:none;box-shadow:none}.switch-field label:first-of-type{border-radius:4px 0 0 4px}.switch-field label:last-of-type{border-radius:0 4px 4px 0}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<div align="left">
    <div class="switch-field">
        <div class="switch-title"> Select Language: </div>
        <input type="radio" id="switch_left" name="switch_2" value="yes" checked />
        <label for="switch_left"> English </label>
        <input type="radio" id="switch_right" name="switch_2" value="no" />
        <label for="switch_right"> বাংলা </label>
    </div>
</div>
</br>
<div class="en_USA_lan"> What would you like to list ? </div>
<div class="bn_BD_lan"> আপনি কি লিস্ ট করতে চান ? </div>

<div class="en_USA_lan"> I love you.</div>
<div class="bn_BD_lan"> আমি তোমায় ভালোবাসি.</div>