Question

我有一个网站，大约有10个HTML页面，都有相同的菜单，比如

<ul class="nav-menu">
                    <li><a href="page1.html">Page1</a></li>
                    <li><a href="page2.html">Page2</a></li>
                    <li><a href="page3.html">Page3</a></li>
                    <li><a href="page4.html">Page4</a></li>
                </ul>

等等。

现在，其中一个页面是一个事件页面，所以当没有事件时，我想隐藏它。我会使用样式属性

<li style="display:none;"><a href="page1.html">Page1</a></li>

我想在一个地方添加或删除此样式属性，但它应该在其他页面上自动更改，因此我不必手动为所有10个页面（和子页面）执行此操作/ p>

这可能吗？欢迎任何建议！ :) 谢谢！

Answer 1

如果每次更改页面时都重新加载页面，则可以使用：

＆＃13;

window.onload = function() {
    var url = window.location.href;
    var parts = url.split('/');
    var page = parts[parts.length - 1];
    
  switch(page){
    case 'page1.html':
      document.getElementById('p1').style.display = 'none';
      break;
    case 'page2.html':
      document.getElementById('p2').style.display = 'none';
      break;
    case 'page3.html':
      document.getElementById('p3').style.display = 'none';
      break;
    case 'page4.html':
      document.getElementById('p4').style.display = 'none';
      break;
  }
}

＆＃13;

<!DOCTYPE html>
<html>
  <head>
    <script src="Here js file route"></script>
  </head>
  <body>
    <ul class="nav-menu">
       <li id="p1"><a href="page1.html">Page1</a></li>
       <li id="p2"><a href="page2.html">Page2</a></li>
       <li id="p3"><a href="page3.html">Page3</a></li>
       <li id="p4"><a href="page4.html">Page4</a></li>
    </ul>
  </body>
</html>

＆＃13;

如何在所有页面上自动隐藏菜单项？

1 个答案: