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

时间:2014-07-08 10:55:24

标签: javascript php html ajax

大家好我每个人通过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>

当我在“家庭”div中调用页面时:

在URl中:

当我点击tab1

localhost/site/#

即使我点击了tab2

localhost/site/#

当我点击tab3

localhost/site/#

我想删除网址上的#值,请建议我如何从网址中删除哈希值。

谢谢

3 个答案:

答案 0 :(得分: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>

答案 1 :(得分:0)

点击处理程序应该返回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>

答案 2 :(得分:0)

您可以将整个脚本重构为:

值得注意的是,将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>