RTL和LTR方向使用按鈕

Question

嗨我有一個簡單的HTML頁面，菜單，內容和選項按鈕位於我的頁面頂部，用於RTL LTR方向，我希望用戶使用按鈕選項來切換方向，有人可以提供簡單的示例頁面或教程如何將其歸檔？

Answer 1

您可以通過在選項按鈕單擊上將類添加到HTML正文標記來完成此操作。

我已經使用了兩個按鈕/功能來改變頁面方向。您可以通過使用一個單一的按鈕/功能和設置標誌來識別頁面方向

function changeToLTR(){ 
 
    $('body').removeClass('direction-rtl').addClass('direction-ltr') 
 
} 
 

 
function changeToRTL(){ 
 
    $('body').removeClass('direction-ltr').addClass('direction-rtl'); 
 
}

.menu { 
 
    width : 100%; 
 
    height: 50px; 
 
    background-color: black; 
 
    color: white; 
 
} 
 

 
.direction-ltr { 
 
    direction: ltr; 
 
} 
 

 
.direction-rtl { 
 
    direction: rtl; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.3/jquery.min.js"></script> 
 
<div class='menu'>Menu</div> 
 
<div class='options'> 
 
<button onclick ='changeToRTL()'>Right to Left</button> 
 
<button onclick ='changeToLTR()'>Left to Right</button> 
 
<div> 
 
<div class='content'> 
 
<h2>Content</h2> 
 
Loreum ipsum doler sit amet.... 
 
</div>