javascript - 如何删除url页面上的#id

Question

请帮我删除或隐藏我在网址浏览器上的#id。

例子:

• 我的 menu1 目标是“#p1”
• 我的网站“mysite.com/index.htm”
• 当我在我的浏览器上点击 menu1 时，我会喜欢这个“mysite.com/index.htm#p1”

我需要我的 id 不显示在 url 浏览器上，只是“mysite.com/index.htm”，而不是像这样的“mysite.com/index.htm#p1”

#p1:target { background: red;}
#p2:target{ background: green;}
#p3:target{ background: blue;}
#p4:target{ background: yellow;}
#p5:target{ background: coral;}
#p6:target{ background: skyblue;}

ul{list-style-type: none;
    margin: 0;
    padding: 0;
    overflow: hidden;
    background-color: #333;
}
li {float: left;}

li a{ display: inline-block;
    color: white;
    text-align: center;
    padding: 14px 16px;
    text-decoration: none;}

li a:hover {
    background-color: #111;
}

<div id="menu">
    <input type="checkbox" id="tbl-menu"/>
    <label for="tbl-menu"><img src="drop.png" height="40px"  width="40px" alt=""></label>
        <nav class="nav">
        	<ul class="tombol">
        	<li class="tombolmenu">
        	    <a class="t1" href="#p1">Menu1</a></li>
            <li><a class="t2" href="#p2">Menu2</a></li>
            <li><a class="t3" href="#p3">Menu3</a></li>
            <li><a class="t4" href="#p4">Menu4</a></li>
            <li><a class="t5" href="#p5">Menu5</a></li>
            <li><a class="t6" href="#p6">Menu6</a></li>
       	  </ul>
         </nav>    
      </div>

<!-- My page target -->

<div id="p1">  Page1 </div>
<div id="p2">  Page2 </div>
<div id="p3">  Page3 </div>
<div id="p4">  Page4 </div>
<div id="p5">  Page5 </div>
<div id="p6">  Page6 </div>

Answer 1

我知道这个问题在互联网时代开始变得陈旧，但我想我会分享我的解决方案(它大致基于 Janmejay Agrawal 的解决方案)。

它基本上取代了超链接的标准行为，并创建了到所需元素的平滑滚动。

此代码使用“vanilla”JS，应该适用于大多数网络浏览器。

//Get all the hyperlink elements
var links = document.getElementsByTagName("a");

//Browse the previously created array
Array.prototype.forEach.call(links, function(elem, index) {
  //Get the hyperlink target and if it refers to an id go inside condition
  var elemAttr = elem.getAttribute("href");
  if(elemAttr && elemAttr.includes("#")) {
    //Replace the regular action with a scrolling to target on click
    elem.addEventListener("click", function(ev) {
      ev.preventDefault();
      //Scroll to the target element using replace() and regex to find the href's target id
      document.getElementById(elemAttr.replace(/#/g, "")).scrollIntoView({
          behavior: "smooth",
          block: "start",
          inline: "nearest"
          });
    });
  }
});

如果此代码不正确，请随时指出!