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

iih3973s 于 2023-05-05 发布在 Java

关注(0)|答案(2)|浏览(111)

诚然，我对此有点不知所措，因为我是哈希的新手，但我认为这可能是我问题的解决方案，所以我希望这里的人可能会有更多的见解。我有一个网页与几个'标签'（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'选择。
如果有一个解决方案，而不是使用散列，我很乐意听到，谢谢你看这个。

JavaScript

来源：https://stackoverflow.com/questions/76159867/using-url-hash-to-open-page-on-specific-tab

2条答案

按热度按时间

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 = '';

（或者，您也可以考虑使用查询参数来指示节。）

赞(0）回复(0）举报 2023-05-05

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>

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

赞(0）回复(0）举报 2023-05-05

我来回答

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

2条答案

相关问题

热门标签

最新问答