a標(biāo)簽的href引發(fā)的點(diǎn)擊事件問題

一個菜單,點(diǎn)擊各項(xiàng)更改背景,a標(biāo)簽href="#"(后面5個)的可以正常更改,但是href=""(前面5個)的雖然執(zhí)行了js,但是好像是刷新了一下頁面,背景又回到了原來的樣子,這個href=""是怎么影響這個非期望的結(jié)果的?百思不得其解,真心求教!
代碼如下:

<!DOCTYPE html>  
<html>  
<head>  
<meta charset="utf-8" />  
<title>菜單</title>  
<style>  
ul{
    list-style: none;
}
 .menu{
    width: 100%;
    height: 60px;
    line-height: 60px;
    background-color: #1b7271;
}
.menu li{
    display: block;
    float: left;
}
.menu li a:hover,
.menu li.on a {
    background-color: #105156;
}
.menu li a{
    display: block;
    padding:0  15px;
    text-decoration: none;
    text-align: center;
    color: #fff;
}
</style>  
</head>  
<body>  
    <ul class="menu" id="menu">
        <li class="on"><a href="">首頁</a></li>
        <li><a href="">二十項(xiàng)人格</a></li>
        <li><a href="">定力訓(xùn)練</a></li>
        <li><a href="">作文寫作</a></li>
        <li><a href="">案例分享</a></li>
        <li><a href="#">國學(xué)課程</a></li>
        <li><a href="#">課程信息</a></li>
        <li><a href="#">教學(xué)參考</a></li>
        <li><a href="#">導(dǎo)師介紹</a></li>
        <li><a href="#">關(guān)于我們</a></li>
    </ul>
</body>  
<script src="jquery-1.10.2.min.js"></script>
<script>
    $(function () {
    $("#menu").on("click", "li", function () {
        $("#menu li").removeClass("on");
        $(this).addClass("on").siblings().removeClass("on");
    });
});
</script>
</html>

回答

編輯回答

懶豬

<a> 標(biāo)簽的 href 屬性用于指定超鏈接目標(biāo)的 URL。點(diǎn)擊這個超鏈接，頁面會跳轉(zhuǎn)到對應(yīng)的頁面，如果這個值為空，則會以本頁面地址進(jìn)行跳轉(zhuǎn)，也就是刷新頁面

其次，<a> 標(biāo)簽的 href 屬性也可以用于錨點(diǎn)跳轉(zhuǎn)，錨 URL - 指向頁面中的錨（href="#top"），此時點(diǎn)擊a標(biāo)簽，頁面會定位到id為top的元素那里

最后，<a> 標(biāo)簽的 href 屬性也可以用于路由跳轉(zhuǎn)，href="#/slgl/ywgz"，此時點(diǎn)擊a標(biāo)簽，會改變頁面路徑的hash值 ==> http://10.34.0.105/slgl/#/slgl/ywgz，這個常用于現(xiàn)代框架的路由跳轉(zhuǎn)

一般的，如果不想a標(biāo)簽點(diǎn)擊有上面三個行為，js方面可以如一樓講的阻止默認(rèn)事件，通過a元素href屬性本身的特性可以有下面幾種：

1、不寫href屬性，那此時的a元素就是一個本本分分的行內(nèi)元素，和span標(biāo)簽差不多，不會有下劃線，激活樣式等特性

2、href='#'，意思就是給你一個空錨點(diǎn)，不做跳轉(zhuǎn)操作，但是要注意，會改變url的hash值

3、建議使用的，href="javascript:void(0)"

2017年6月2日 04:05

編輯回答