單選按鈕單擊是顯示英文並單擊不顯示Bangla

-1

我想使用自定義翻譯器翻譯我的頁面。當我選擇按鈕孟加拉比整個頁面翻譯成孟加拉，當我點擊英文比整個頁面返回原來的語言英語。單選按鈕單擊是顯示英文並單擊不顯示Bangla

默認顯示英文div的內容，但是當我點擊孟加拉語時只顯示孟加拉語div的內容並隱藏英文div的內容和當我點擊英語時比孟加拉語的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"> 
 
\t \t 
 
\t \t \t \t <div class="switch-field"> 
 
\t \t \t \t <div class="switch-title">Select Language :</div> 
 
\t \t \t \t <input type="radio" id="switch_left" name="switch_2" value="yes" checked/> 
 
\t \t \t \t <label for="switch_left">English</label> 
 
\t \t \t \t <input type="radio" id="switch_right" name="switch_2" value="no" /> 
 
\t \t \t \t <label for="switch_right">বাংলা</label> 
 
\t \t \t \t </div> 
 

 
\t \t \t </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>

感謝All幫助我瞭解api項目。

來源

2017-02-12 Saiful Islam Sagor

請出示你試過已經這樣做。 –

我正在使用這一個

但我想使用api和jquery手動執行，謝謝 –

更新您的腳本以下，它應該工作正常。（不要忘記添加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>

來源

2017-02-12 11:46:26

{ 「消息」：「未捕獲的ReferenceError：$沒有定義」，「文件名」：「http://stacksnippets.net/js」，「LINENO」：13，「colno」：9 } –

錯誤請解決它先生謝謝 –

首先添加JQuery。 –

單選按鈕單擊是顯示英文並單擊不顯示Bangla

回答

相關問題