当Ajax调用要在div中加载的页面时，如何删除锚标记内链接中的哈希

Question

Hi every one i calling the page through ajax call to load in a particular div.

<ul id="nav" class="nav" style="font-size:12px;">
    <li><a href="#" id="m_blink" onclick="fun1()">tab1</a></li>
    <li><a href="#" id="d_blink" onclick="fun2()">tab2</a></li>
    <li><a href="#" id="k_blink" onclick="fun3()">tab3</a></li>

</ul>

<div id="home"></div>

This is my Javascript script calling the pages in a particular 'home' div

<script type="text/javascript">

function fun1(){

$("#home").load("page1.php",{},function(){});

}

function fun2(){

$("#home").load("page2.php",{},function(){});

}

function fun3(){

$("#home").load("page3.php",{},function(){});

}
</script>

And when i called the pages in 'home' div :

In the URl :

when i clicked on the tab1

localhost/site/#

Even when i clicked on the tab2

localhost/site/#

And when i clicked on the tab3

localhost/site/#

I want to remove the # value on the URL ,Any one please suggest me how to remove the hash value from the URL.

Thanks

Answer 1

Try this solution ;)

<ul id="nav" class="nav" style="font-size:12px;">
    <li><a href="#" id="m_blink">tab1</a></li>
    <li><a href="#" id="d_blink">tab2</a></li>
    <li><a href="#" id="k_blink">tab3</a></li>

</ul>

<div id="home"></div>


<script type="text/javascript">
    $("#m_blink").click(function(event) {
        event.preventDefault();
        $("#home").load("page1.php", {}, function() {});
    });

    $("#d_blink").click(function(event) {
        event.preventDefault();
        $("#home").load("page2.php", {}, function() {});
    });

    $("#k_blink").click(function(event) {
        event.preventDefault();
        $("#home").load("page3.php", {}, function() {});
    });
</script>

Answer 2

The click handler should return false so the link isn't followed if the JavaScript doesn't fail

<script type="text/javascript">

    function fun1(){

    $("#home").load("page1.php",{},function(){});
    return false;
    }

    function fun2(){

    $("#home").load("page2.php",{},function(){});
    return false;
    }

    function fun3(){

    $("#home").load("page3.php",{},function(){});
    return false;
    }
    </script>

Answer 3

You could refactor the whole script into something like:

It's also worth noting that it's a good idea to separate the Javascript from HTML, so you don't have inline click events being called.

 $(document).ready(function() {

    $("#nav a").on("click", function(e){
        e.preventDefault();

        var page = $(this).attr("href");
        $("#home").load(page);
    });
});

And the preventDefault(); function will stop the # being added, and the default link event happening - the same as returning false .

HTML

I've added the page1.php links to the href - so if Javascript is disabled for whatever reason, you'll still be able to navigate to that page.

<ul id="nav" class="nav" style="font-size:12px;">
    <li><a href="page1.php" id="m_blink">tab1</a></li>
    <li><a href="page2.php" id="d_blink">tab2</a></li>
    <li><a href="page3.php" id="k_blink">tab3</a></li>
</ul>