Nur zum Formular umleiten und Option auswählen, wenn auf die Schaltfläche geklickt wird – andernfalls erfolgt standardmäßig die Standardanzeige der Navigationsregisterkarten

Question

Ich habe ein Formular auf einer Navigationsregisterkarte und verlinke es von einer anderen Navigationsregisterkarte aus. Ich verwende den folgenden Code, um von mehreren Seiten aus auf alle meine Navigationsregisterkarten zu verlinken.

const hash=window.location.hash;
        const bsTab = new bootstrap.Tab(hash);
        bsTab.show();

Es funktioniert, aber:

1. Wenn möglich, möchte ich den Hashtag nach der Weiterleitung von der URL entfernen. Das ist ein Problem, das ich mit diesem Teil von Javascript habe.

2. Eine andere ist: Um über Buttons auf mein Formular zu verlinken, habe ich mir folgende Lösung ausgedacht:

   function redirectToForm() {
           window.location.href = "http://www.example.com/#nav- 
       contact-me-tab";
           localStorage.setItem("selectedOption", "2");
       }
   
       const hash=window.location.hash;
       const bsTab = new bootstrap.Tab(hash);
       bsTab.show();
   
       var selectedOption = 
     localStorage.getItem("selectedOption");
       document.getElementById("reason").value = selectedOption;
       localStorage.removeItem("selectedOption");

Auf den ersten Blick funktioniert das, aber wenn ich am Ende wieder auf das Formular verlinke, ist die Standardoption nicht mehr ausgewählt. In einigen Fällen sind keine Optionen ausgewählt. Ich möchte, dass das Formular immer die standardmäßig ausgewählte Option anzeigt (die standardmäßig „0“ ist, andernfalls wird sie deaktiviert), es sei denn, ich klicke auf meine Schaltfläche. Ich möchte diesen Wert nur dann auf Option 2 ändern, wenn auf meine Schaltfläche geklickt wird. Wenn ich von einem anderen Link zu meinem Formular weiterleite, möchte ich, dass der standardmäßig deaktivierte Wert angezeigt wird

Das ist mein Button:

<button id="gotoformselect2" onclick="redirectToForm()">Request References</button>

Vielleicht kann jemand, der mehr über Javascript weiß:

1. Helfen Sie mir, Hashes nach der Weiterleitung zu jeder Navigationsregisterkarte zu entfernen&
2. Könnte meinen Code besser strukturieren, sodass nur Option 2 ausgewählt wird, wenn auf meine Schaltfläche geklickt wird.

Ansonsten möchte ich, wenn ich auf ein Formular oder eine andere Navigationsregisterkarte verlinke, nur diesen Code verwenden:

const hash=window.location.hash;
        const bsTab = new bootstrap.Tab(hash);
        bsTab.show();

Wenn Sie helfen können, lassen Sie es mich bitte wissen! Dank im Voraus.

Answer 1

1. 使用history API替换哈希值。
2. 使用 selectedIndex 来选择下拉选项。

function redirectToForm() {
  window.location.href = "http://www.example.com/#nav-contact-me-tab";
  localStorage.setItem("selectedOption", "2");
}

if (location.hash) {
  const hash = location.hash;
  const bsTab = new bootstrap.Tab(hash);
  bsTab.show();
  history.replaceState('', null, location.origin+location.pathname); //replaces the hash
}

if (localStorage.getItem('selectedOption')) {
  const option = localStorage.getItem('selectedOption');
  document.getElementById('reason').selectedIndex = option;
  localStorage.removeItem("selectedOption");
}