在 wordpress 網站上，我想在 url 不包含“/en/”路徑時顯示“按鈕一”，當 url 包含“/en/”時顯示“按鈕二”。
按鈕的 html 如下所示：
<a href="https://www.google.com" >按鈕一</span></a>
<a href="https://www.yahoo.com" >按鈕二</span></a>
我一直在嘗試這種方法的許多變體：
<script type="text/javascript">
if(window.location.href.indexOf("/en/") > -1) {
document.getElementsByClassName("microwidget-btn mini-button header-elements-button-1 show-on-desktop").style.display = 'none';
document.getElementsByClassName("microwidget-btn mini-button header-elements-button-2 show-on-desktop").style.display = '';
} else {
document.getElementsByClassName("microwidget-btn mini-button header-elements-button-1 show-on-desktop").style.display = '';
document.getElementsByClassName("microwidget-btn mini-button header-elements-button-2 show-on-desktop").style.display = 'none';
}
</script>
但是什么也沒發生，在控制臺中我得到了
未捕獲的型別錯誤：document.getElementsByClassName(...)[0] 未定義
謝謝
uj5u.com熱心網友回復：
您可以使用 JavaScript 來檢查 url 是否包含特定語言，例如
document.addEventListener("DOMContentLoaded", function() {
if(window.location.href.indexOf("/en/") > -1) {
// en page
// Show button 2
document.getElementById('button-one').style.display = 'none';
document.getElementById('button-two').style.display = 'flex';
} else {
//Show button 1
document.getElementById('button-one').style.display = 'flex';
document.getElementById('button-two').style.display = 'none';
}
});
請注意，我更改了您的 html 代碼。我添加了一個 id 屬性和樣式標簽，默認為 display: none
<a href="https://www.google.com" id="button-one" class="microwidget-btn mini-button header-elements-button-1 show-on- desktop" style="display:none" >Button one</span></a>
<a href="https://www.yahoo.com" id="button-two" class="microwidget-btn mini-button header-elements-button-2 show-on-desktop" style="display:none">Button two</span></a>
uj5u.com熱心網友回復：
你可以使用這個wordpress代碼
global $wp;
$currenturl = home_url( $wp->request )
$find= '/en';
if (strpos($currenturl, $find) !== false) {
?>
<a href="https://www.google.com" class="microwidget-btn mini-button header-elements-button-1 show-on-desktop" >Button one</span></a>
<?php
}else{
?>
<a href="https://www.yahoo.com" class="microwidget-btn mini-button header-elements-button-2 show-on-desktop" >Button two</span></a>
<?php
}
uj5u.com熱心網友回復：
您可以使用 WordPress 代碼：
function callback_function(){
$uri = $_SERVER['REQUEST_URI'];
if (str_contains($uri, '/en/')) {
?>
<a href="https://www.google.com" class="microwidget-btn mini-button header-elements-button-1 show-on-desktop" >Button one</span></a>
<?php
}else{
?>
<a href="https://www.yahoo.com" class="microwidget-btn mini-button header-elements-button-2 show-on-desktop" >Button two</span></a>
<?php
}
}
add_action('init','callback_function');
轉載請註明出處，本文鏈接：https://www.uj5u.com/qita/507719.html
標籤：javascript html css WordPress
上一篇：按類名和樣式屬性JS按選擇器搜索