當Ajax調用要在div中加載的頁面時，如何刪除錨標記內鏈接中的哈希

Question

大家好，我通過ajax調用來調用頁面以加載特定的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>

這是我的Javascript腳本，用於調用特定“ 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>

當我在'home'div中調用頁面時：

在URl中：

當我單擊tab1時

localhost/site/#

即使我單擊了tab2

localhost/site/#

當我點擊tab3時

localhost/site/#

我想刪除網址上的＃值，有人建議我如何從網址中刪除哈希值。

謝謝

Answer 1

試試這個解決方案;）

<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

點擊處理程序應返回false，因此如果JavaScript沒有失敗，則不會遵循鏈接

<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

您可以將整個腳本重構為以下形式：

還值得注意的是，將Javascript與HTML分開是個好主意，因此不必調用內聯單擊事件。

 $(document).ready(function() {

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

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

和preventDefault(); 函數將停止添加＃，並發生默認的鏈接事件-與返回false相同。

的HTML

我已經添加了page1.php鏈接到href -所以，如果JavaScript是出於某種原因被禁用，你仍然可以導航到該頁面。

<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>