如何删除 url 页面上的#id

Question

请帮助我在 url 浏览器上删除或隐藏我的 #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"
          });
    });
  }
});

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

Answer 2

有几种方法可以做到这一点，我最喜欢的是制作一个自定义函数来滚动到页面链接，而不是依赖浏览器。 像这样

$("a[href^='#']").click(function(e){
  e.preventDefault();
  var elem = $($(this).attr('href'));
  /* check for broken link */
  if(elem.length)
    $(window).animate('scrollTop' , elem.offset().top)
})

除了在 url 中隐藏“#id”之外，它还会为滚动设置动画。

希望对您有所帮助。