Question

我很好奇，是否有一种方法可以基于引用链接专门显示某些元素。我有带有多个链接的下拉导航栏，我需要这些链接需要转到链接页面，但仅显示具有特定类名的元素。

例如：

<br>

点击“工作”导航链接的“娱乐”下拉选择。它导航到所需的页面BUT，仅显示具有'.entr'类的元素。与“工作”导航的“电影”下拉选择类似；导航，但仅显示“ .film”类的元素。

我可以在“工作”页面上使用专门用于此目的的另一组链接来完成此操作，但是我想知道是否可以通过与元素不同的页面上的导航栏链接执行类似的操作开启。

Answer 1

因此，假设您在导航链接中使用的是这样的内容： <a href='/work#Entertainment>Entertainment</a>

您可以将页面上的所有元素设置为隐藏display:none，然后执行以下操作：

window.onload = function() { 
  const hash = document.location.hash;
  let className;
  let elementsToShow;

  switch (hash) {
    case 'Entertainment' :
        className ='.entr';
        break;
    case 'Film' :
        className ='.film';
        break;
    case 'News' :
        className = '.news';
        break;
  }

  if (className) {
    elementsToShow = document.querySelectorAll(className);
  } else {
    elementsToShow = document.querySelectorAll('.class-on-all-elements');
  }

  elementsToShow.forEach( function(element){
    element.style.display = 'block';
  }); 
}

遍历整个过程...

点击<a href='/work#Entertainment>Entertainment</a>会将您带到网址为website.com/work#Entertainment的页面

在该页面上加载该脚本时，脚本将运行：window.onload = function() {

它获取“哈希”（#之后的所有内容）并将其保存到变量hash中： const hash = document.location.hash;

然后将hash的值与许多不同的情况进行比较：switch (hash) {

如果找到匹配项，则将正确的类名称分配给变量className：

case 'Film' : className ='.film';

如果它具有className的值，它将选择该类（elements = document.querySelectorAll(className)）的所有元素，并将它们添加到变量elementsToShow中。如果className没有值，则会将所有元素添加到elementsToShow中，因为我们不需要空白页。

最后，遍历elementsToShow中的所有元素并将其设置为可见：element.style.display = 'block'

我需要定位到页面，该页面仅显示特定元素

1 个答案: