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

有几种方法可以做到这一点，我最喜欢的是使自定义功能滚动到页面链接而不是依赖于浏览器。喜欢这个

$("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)
})

除了从网址隐藏'#id'之外，它还会动画滚动。

希望它会有所帮助。

Answer 2

我知道这个问题在互联网时代开始变得陈旧，但我想我会分享我的解决方案（这是基于Janmejay Agrawal＆＃39;）。

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

此代码使用＆＃34; vanilla＆＃34; JS并且应该适用于大多数Web浏览器。

//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"
          });
    });
  }
});

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

如何删除网址页面上的#id

2 个答案: