javascript - How to remove #id on url page - Stack Overflow

admin管理员组

文章数量:1390547

please help me for remove or hide my #id on url browser.

example:

• my menu1 target on "#p1"
• my site "mysite/index.htm"
• when i click menu1 on my browser will like this "mysite/index.htm#p1"

i need my id not show on url browser just "mysite/index.htm" not like this "mysite/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>

please help me for remove or hide my #id on url browser.

example:

• my menu1 target on "#p1"
• my site "mysite./index.htm"
• when i click menu1 on my browser will like this "mysite./index.htm#p1"

i need my id not show on url browser just "mysite./index.htm" not like this "mysite./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>

• javascript
• jquery
• html
• css
• .htaccess

Share Improve this question Follow asked Dec 15, 2016 at 10:39 Ojan MriOjan Mri 3311 silver badge33 bronze badges 9

• You can't get/replace #whatever from URL using .htaccess because it is not parsed to server. – Naman Commented Dec 15, 2016 at 10:43
• 2 Why would you want to do that? The point of the # anchor is that a user can use it to link directly to a point on your page. – DavidG Commented Dec 15, 2016 at 10:44
• Possible duplicate of Remove/avoid adding target link to URL – Shobhit Srivastava Commented Dec 15, 2016 at 10:45
• Possible duplicate of How to remove the hash from window.location with JavaScript without page refresh? – roberrrt-s Commented Dec 15, 2016 at 10:48
• you are using <a href="#id"></a> so it will work and redirect as a hyperlink. Try using click events of jQuery, you will get your answer. – Akshay Tilekar Commented Dec 15, 2016 at 10:49

 |  Show 4 more ments

2 Answers 2

Sorted by: Reset to default 3

I know this question is starting to be old in Internet years but I thought I'd share my solution (which is loosely based off Janmejay Agrawal's).

It basically replaces the standard behaviour of a hyperlink and creates a smooth scrolling to the desired element.

This code uses "vanilla" JS and should work with most web browsers.

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

Should this code not be correct, please feel free to point it out !

There are several ways to do it, and my favourite is to make a custom function to scroll to in page link instead of relying on browser for it. Like this

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

In addition of hiding '#id' from url it'll also animate scrolling.

Hope It'll help.

本文标签： javascriptHow to remove id on url pageStack Overflow