使用 URL 更改 HTML 屬性

Question

我不完全確定這是否可能並且一直無法找到關於此事的任何信息，這並沒有給我太大希望，但也許我可以通過這種方式找到答案。 在某些情況下，我的問題與此頁面有關。 供參考：我將在我的問題中提到“選項卡”，這是關於該頁面底部的選項卡，而不是瀏覽器選項卡。

我正在為我作為通信員工工作的公司改造網站。 作為此次改造的一部分，我們希望在網站上放置一個詳細說明我們工作流程的信息圖，並允許用戶單擊它以獲取有關他們剛剛單擊的信息圖步驟的信息。 我們使用 Wordpress 和 Elementor 的免費版本，這限制了我在 Wordpress/Elementor 給我的前端之外進行任何更改的能力。

我目前正在使用 Adobe Illustrator 使用 Illustrator 的屬性菜單創建信息圖的圖像 map，並且已經能夠使用 hash 標志通過使用相關選項卡的div id使頁面跳轉到有關步驟的文本. 但是，為了完成這項工作，我還需要能夠實際更改頁面上打開的選項卡。 我發現這依賴於需要更改的兩個 HTML 屬性：

• 需要關閉的tab和需要打開的tab的class屬性都需要調整。 關閉的選項卡使用elementor-tab-title elementor-tab-desktop-title ，打開的選項卡使用elementor-tab-title elementor-tab-desktop-title elementor-active 。
• 需要關閉的標簽頁的aria-expanded屬性需要改為false ，而需要打開的標簽頁需要將該屬性設置為true 。

有什么辦法可以使用 URL 來解決這個問題嗎？ 如果沒有，考慮到我正在使用的系統的限制，我還可以使用哪些其他方法？

我在 inte.net 上搜索了解決方案，查看了以 Elementor 為中心的教程，並搜索了 Stack Exchange。 雖然我找到了涉及 JS/JQuery 腳本的解決方案，但不幸的是，由於我使用的軟件的限制，這是不可能的。 如果有涉及 URL 的東西，我可以通過圖像映射來使用它，這應該可以讓我解決這些限制。

Answer 1

您的問題並不完全清楚您希望 URL 看起來像什么。

或者您希望如何更改 URL。

但是你肯定可以根據URL更改前端頁面上的元素。

例如像這樣：

// get and parse url parameters
let urlParams = new URLSearchParams(window.location.search);

// extract the ones you are interested in
let currentTabID = urlParams.get('currentTab');
let closedTabID = urlParams.get('closedTab');

// since you don't specify what sets the URL I suppose it will be blank by default 
// and only be filled on page visit. So lets set the default
currentTabID = currentTabID || 'home';

// get the tab HTML elements
// Note: the usage of $ prefix on elements is just a naming habit from jQuery and not mandatory
let $closedTab = document.getElementById(closedTabID);
let $currentTab = document.getElementById(currentTabID);

// change their classes or whatver else you need to
if($closedTab) $closedTab.addClass('tab-closing');
if($currentTab) $currentTab.addClass('tab-selected');

這適用於 URL 匹配： https://example.com?currentTab=about&closedTab=contacts

您可能希望在每個選項卡鏈接上設置 URL 參數。 當用戶單擊選項卡鏈接時更改 URL。

<a class='tab'href="?currentTab=about">About us</a>

然而，這將不包括 URL 中的已關閉選項卡，您需要通過 Javascript 完成此操作：

 //continuing from the above script where we captured the urlParams

document.getElementsByClassName('tab').forEach(($element)=>{
  $element.href = $element.href + '&closedTab=' + currentTab
})