history.pushState删除部分网址

Question

I'm trying to implement history.pushState into our website to replace hash bangs but I'm puzzled as to why every time I click on a link that instead of appending the href value onto the current url e.g. www.abc.com/123.php/20 it instead makes it www.abc.com/20 even though I am still on the 123.php page (hopefully that makes sense).

I should also point out the the html below is created via php.

I have read quite a few tutorials explaining how to implement this and read a lot of articles, but still no luck. Also all the tutorials I have found show this working with the main menu but this is working with a grid of projects that load in data with Ajax.

Any help would be hugely appreciated!

<a id="projectAnchor" class="projectItem powerline" href="30" style="position: absolute; left: 5px; top: 5px;">
    <div id="imgContainer" name="Western Power Distribution - Brechfa Connection" href="#!30">
        <img id="projectImg" src="projectContent/30/198-th.jpeg" alt="Western Power Distribution - Brechfa Connection">
    </div>
    <img id="projectIcon" src="images/solution/powerlineIconB.png" alt="Powerline">               
        <p id="projectText">Western Power Distribution - Brechfa Connection</p>
        <div class="blueBar" id="colourBar"> </div>
</a>

var e, p;
$(function(){
    p = $(".projectItem").click(function() {
        e = $(this);
        if(!e.hasClass('active')){
            getResults();
            history.pushState(null, null, e.attr('href'));
        }
        return false;
    });
});

window.addEventListener("popstate", function(){
    e = $('a[href="'+location.pathname.split("/").pop()+'"]');
    getResults();
});

function getResults(){
    p.removeClass('active');
    e.addClass('active');
    $.get('projectT.php', {id: e.attr('href')}, function(data){
        $('#projectContent').html(data);
    });
}

</div>