How to keep submenu opened after page load in JavaScript-CodePudding

I have almost done my work and my client ask for keeping submenu opened when user click the item in the menu and also set active color. The idea is better orientation when user actualy is. In React App it wouldn't be problem, cuz whole app works like single page. In this case i've decided use only HTML/JS as my challenge.

Is it even possible somehow keep menu opened/open again menu when new page is loaded please?

I tried make from this app something like single page app by some tutorials like "load paghe without refresh" etc, but nothing worked.

menu

<div >
          <div >
            <a >
              Matice
              <i ></i>
            </a>
            <div >
              <a
                href="/pages/matice/zakladni-operace.html"
                id="matice/zakladni-operace"
                onClick="reply_click(this.id)"
                >
                Základní operace
              </a>
              <a
                href="/pages/matice/hodnosti.html"
                id="matice/hodnosti"
                onClick="reply_click(this.id)"
                >
                Hodnost
              </a>
              <a
                href="/pages/matice/determinanty.html"
                id="matice/determinanty"
                onClick="reply_click(this.id)"
                >
                Determinanty
              </a>
              <a
                href="/pages/matice/inverzni-matice.html"
                id="matice/inverzni-matice"
                onClick="reply_click(this.id)"
                >
                Inverzní matice
              </a>
              <a
                href="/pages/matice/maticove-rovnice.html"
                id="matice/maticove-rovnice"
                onClick="reply_click(this.id)"
                >
                Maticové rovnice
              </a>
              <a
                href="/pages/matice/vlastni-cisla-a-vektory.html"
                id="matice/vlastni-cisla-a-vektory"
                onClick="reply_click(this.id)"
                >
                Vlastní čísla a vektory
              </a>
            </div>
          </div>
        </div>

CodePudding user response：

you need to use AJAX for sure ,,, if you are working on PHP research about PHP AJAX if you are working on static-webside(html ,css , javascript) Research about JAVASCRIPT AJAX or JQUERY AJAX

CodePudding user response：

You can try to get window.location.href on load of your page and add style classes depending on conditionally with something like <div > to set active color

CodePudding user response：

You could use AJAX to call the page. But that doesn't sound like what you want. An alternative way in javascript would be to get the current window.location.href when the page loads, then inject a class name into the relevant node, and have the css for that class make it visible and highlighted.

If you're using a library like jQuery this shouldn't be too hard to achieve.