歡迎我在這里搜索了很多問題的解決方案，不幸的是我找不到明確的答案。我在這個問題上嘗試了這些答案如何動態設定 HTML 語言屬性？ 但這對我不起作用。
我在英語作為默認語言和阿拉伯語作為第二語言之間創建了語言切換按鈕，它可以很好地從左到右改變我的 html 頁面的方向，因為第二語言是阿拉伯語，但標簽中的屬性 (lang="en") 確實不改成 (lang="ar") 當頁面右轉時，假??設頁面內容會是阿拉伯語。請幫我實作這個功能。當我按下轉換器按鈕時，請查看屬性 lang 更改為我想要的 RTL 屬性 lang 的值從 en 更改為 ar。謝謝你們，
(function ($) {
"use strict";
$(".direction_switch button").click(function () {
$("body").toggleClass(function () {
return $(this).is(".rtl, .ltr") ? "rtl ltr" : "rtl";
});
});
})(window.jQuery);.ltr {
direction: ltr;
}
.rtl {
direction: rtl;
}
ul {
list-style: none;
}
.menu {
display: block;
}
.menu ul {
display: inline-flex;
}
.menu ul li {
padding: 0 10px;
}
body.ltr .demo-ltr {
display: none;
}
body.ltr .demo-rtl {
display: block;
}
body.ltr .demo-rtl button {
background-color: transparent;
color: #000;
border: 1px solid;
padding: 0px 10px;
}
body.rtl .demo-rtl {
display: none;
}
body.rtl .demo-ltr {
display: block;
}
body.rtl .demo-ltr button {
background-color: transparent;
color: #000;
border: 1px solid;
padding: 0px 10px;
}<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<!DOCTYPE html>
<html lang="en">
<head>
</head>
<body class="ltr">
<nav class="menu">
<a href="">Logo</a>
<ul>
<li><a href="">Home</a></li>
<li><a href="">Abou</a>t</li>
<!-- page-direction -->
<div class="page_direction">
<div class="demo-rtl direction_switch"><button class="rtl">RTL</button>
</div>
<div class="demo-ltr direction_switch"><button class="ltr">LTR</button>
</div>
</div>
<!-- page-direction end -->
</ul>
</nav>
</body>
</html>uj5u.com熱心網友回復：
您可以attr(attribute,function)在 jQuery 中使用方法并更改 HTML 標記的屬性，如下所示：
在代碼中，i是集合的索引位置，v是屬性的當前值（更改前）
(function ($) {
"use strict";
$(".direction_switch button").click(function () {
$("body").toggleClass(function () {
return $(this).is(".rtl, .ltr") ? "rtl ltr" : "rtl";
});
//Changing attribute of HTML tag
$("html").attr("lang",(i,v)=>{
return v=="en"?"ar":"en"
})});
})(window.jQuery);.ltr {
direction: ltr;
}
.rtl {
direction: rtl;
}
ul {
list-style: none;
}
.menu {
display: block;
}
.menu ul {
display: inline-flex;
}
.menu ul li {
padding: 0 10px;
}
body.ltr .demo-ltr {
display: none;
}
body.ltr .demo-rtl {
display: block;
}
body.ltr .demo-rtl button {
background-color: transparent;
color: #000;
border: 1px solid;
padding: 0px 10px;
}
body.rtl .demo-rtl {
display: none;
}
body.rtl .demo-ltr {
display: block;
}
body.rtl .demo-ltr button {
background-color: transparent;
color: #000;
border: 1px solid;
padding: 0px 10px;
}<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<!DOCTYPE html>
<html lang="en">
<head>
</head>
<body class="ltr">
<nav class="menu">
<a href="">Logo</a>
<ul>
<li><a href="">Home</a></li>
<li><a href="">Abou</a>t</li>
<!-- page-direction -->
<div class="page_direction">
<div class="demo-rtl direction_switch"><button class="rtl">RTL</button>
</div>
<div class="demo-ltr direction_switch"><button class="ltr">LTR</button>
</div>
</div>
<!-- page-direction end -->
</ul>
</nav>
</body>
</html>uj5u.com熱心網友回復：
document.documentElement.setAttribute('lang', 'AR');
還
document.documentElement.lang = 'AR'
注意這一點；
<script>Code Here</script>
HTMLElement.lang 描述
轉載請註明出處，本文鏈接：https://www.uj5u.com/caozuo/425085.html
標籤：javascript html jQuery