CODEWITHSUNDEEP
javascripthtml
True North
True North

Reputation: 33

How do i remove index#about from the url when i come from another page to the main page section

So my nav looks like this: navbar

On the main page (index.html) i managed to remove the # from the url for about and services with this js code:

window.addEventListener('hashchange', e => {
  history.replaceState({}, "", location.hash.slice(1));
});

as when we click on them it takes us to the section on the main page but if i am on the contact.html page and i click on the about or services in the nav the url looks like this: /index.html#about or /index.html#services. I want it to show same as it does on the main page which is /about or /services.

I tried to change the href link for the links but it does not work as about and services is not a page but sections on the main page. Here is the nav code on main page (index.html):

<nav>
                <ul class="navbar">
                    <li><a href="#about">About</a></li>
                    <li><a href="#services">Services</a></li>
                    <li><a href="#case_studies">Case Studies</a></li>
                    <li><a href="/blog.html">Blog</a></li>
                    <li><a class="btn" href="/contact.html">Contact</a></li>
                </ul>
</nav>

And here is the nav code on contact.html page:

<nav>
                <ul class="navbar">
                    <li><a href="/index.html#about">About</a></li>
                    <li><a href="/index.html#services">Services</a></li>
                    <li><a href="/index.html#case_studies">Case Studies</a></li>
                    <li><a href="/blog.html">Blog</a></li>
                    <li><a class="btn" href="/contact.html">Contact</a></li>
                </ul>
</nav>

When i click on about on the main page (index.html) the URL i get is something like this: https://www.example.com/about but when i click on about from contact.html page the URL is like this: https://www.example.com/index.html#about. The URL i want to get is same as on the main page without the index.html#.

Upvotes: 2

Views: 58

Answers (1)

svarlitskiy
svarlitskiy

Reputation: 812

Comments

  1. If your server can resolve /about to /about.html then skip to the html code.
  2. If your server cannot resolve /about to /about.html then you could create a folder with the name of about and place an index.html inside and it should be able to resolve.
  3. Then you can link to your pages as follows:

HTML: Multi-page

<nav>
    <ul class="navbar">
        <li><a href="/about">About</a></li>
        <li><a href="/services">Services</a></li>
        <li><a href="/case_studies">Case Studies</a></li>
        <li><a href="/blog">Blog</a></li>
        <li><a href="/contact" class="btn">Contact</a></li>
    </ul>
</nav>

HTML: Single-page

<nav>
    <ul class="navbar">
        <li><a href="/#about">About</a></li>
        <li><a href="/#services">Services</a></li>
        <li><a href="/#case_studies">Case Studies</a></li>
        <li><a href="/#blog">Blog</a></li>
        <li><a href="/#contact" class="btn">Contact</a></li>
    </ul>
</nav>

JS

function hashHandler(){
    if ( !location.hash ) return;
    history.replaceState({}, "", location.hash.slice(1));
}

window.addEventListener( 'load', hashHandler, false );
window.addEventListener( 'hashchange', hashHandler, false );

Upvotes: 1

Related Questions