javascript 使用URL哈希在特定选项卡上打开页面

iih3973s  于 2023-05-05  发布在  Java
关注(0)|答案(2)|浏览(110)

诚然,我对此有点不知所措,因为我是哈希的新手,但我认为这可能是我问题的解决方案,所以我希望这里的人可能会有更多的见解。我有一个网页与几个'标签'(div的信息隐藏,直到他们的按钮被点击,隐藏所有其他div的信息,直到他们的按钮被点击),我想能够打开到一个特定的标签从不同的网页。
这里是一个框架的前网页。默认情况下,当您定期导航到页面时,第一个div是可见的。

<div id="first" class="commission">
content
</div>

<div id="second" class="commission" style="display:none;">
content
</div>

<div id="third" class="commission" style="display:none;">
content
</div>

在这个网页上有一些按钮,你可以点击这些按钮在这些div之间切换。

<button class="commissiontab" onclick="commissionType(event, 'first')">first</button>
<button class="commissiontab" onclick="commissionType(event, 'second')">Second</button>
<button class="commissiontab" onclick="commissionType(event, 'third')">Third</button>

在这些代码之间运行的javascript如下:

function commissionType(evt, commissionName) {
  var i, commissiontab;
  var x = document.getElementsByClassName("commission");
  for (i = 0; i < x.length; i++) {
    x[i].style.display = "none";
  }
  commissiontab = document.getElementsByClassName("commissiontab");
  for (i = 0; i < x.length; i++) {
    commissiontab[i].className = commissiontab[i].className.replace(" selected", "");
  }
  window.scrollTo({ top: 0, behavior: 'smooth' });
  evt.currentTarget.className += " selected";
  document.getElementById(commissionName).style.display = "grid";
}

不知何故,我希望这些按钮在不同的页面('index.html'),但当你点击'Third'例如,你被带到新页面('commissiontypes.html')与'Third'而不是默认的'First'选择。
如果有一个解决方案,而不是使用散列,我很乐意听到,谢谢你看这个。

yc0p9oo0

yc0p9oo01#

您可以先用'commission'类隐藏所有元素,然后在页面加载时基于location.hash只显示其中一个元素。这样,commissiontypes.html(和commissiontypes.html#first)将显示第一个div,commissiontypes.html#second将显示第二个div,依此类推。

document.querySelectorAll('.commission').forEach(x => x.style.display = 'none');
const activeEl = document.querySelector(location.hash || '#first');
activeEl.style.display = '';

(或者,您也可以考虑使用查询参数来指示节。)

7d7tgy0s

7d7tgy0s2#

我认为你试图实现的是在同一页上打开不同的部分。下面的示例演示如何将所有代码放在一个页面上并与之交互。您也可以使用URL打开任何部分。使用hidden属性的另一个好处是,在将显示设置更改为none之前,不必跟踪显示设置。

超文本标记语言

<nav>
  <button id="btn-first" class="commissiontab" onclick="commissionType('first')">first</button>
  <button id="btn-second" class="commissiontab" onclick="commissionType('second')">Second</button>
  <button id="btn-third" class="commissiontab" onclick="commissionType('third')">Third</button>
</nav>

<div id="first" class="commission" hidden>
  content #1
</div>

<div id="second" class="commission" hidden>
  content #2
</div>

<div id="third" class="commission" hidden>
  content #3
</div>

JS

function commissionType( select='first' ){
    // Get all tabs
    const tabs = document.getElementsByClassName('commission');
    const btns = document.getElementsByClassName('commissiontab');

    // Loop tabs and set to hidden
    for ( const tab of tabs || [] ){
        tab.setAttribute('hidden','');
    }

    // Loop btns and remove class selected
    for ( const btn of btns || [] ){
        btn.classList.remove('selected');
    }

    // Add selected class to correct button
    btns[ `btn-${select}` ].classList.add('selected');

    // Unhide the selected tab
    tabs[ select ].removeAttribute('hidden');

    // Scroll to the selected tab
    tabs[ select ].scrollIntoView()
}

window.addEventListener('load', function() {
    // Parse URL search params
    const params = new URLSearchParams( location.search );

    // Get tab from url or set to undefined
    const tab = params.get('tab') ?? undefined;

    // Run command to unhide tab
    commissionType( tab );
}, false);

URL示例

https://example.com?tab=first
https://example.com?tab=second
https://example.com?tab=third

相关问题