a标签的href引发的点击事件问题

浅樱
  • 446

一个菜单,点击各项更改背景,a标签href="#"(后面5个)的可以正常更改,但是href=""(前面5个)的虽然执行了js,但是好像是刷新了一下页面,背景又回到了原来的样子,这个href=""是怎么影响这个非期望的结果的?百思不得其解,真心求教!
代码如下:

<!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="">二十项人格</a></li>
        <li><a href="">定力训练</a></li>
        <li><a href="">作文写作</a></li>
        <li><a href="">案例分享</a></li>
        <li><a href="#">国学课程</a></li>
        <li><a href="#">课程信息</a></li>
        <li><a href="#">教学参考</a></li>
        <li><a href="#">导师介绍</a></li>
        <li><a href="#">关于我们</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>  
回复
阅读 4.2k
6 个回答
✓ 已被采纳

<a> 标签的 href 属性用于指定超链接目标的 URL。点击这个超链接,页面会跳转到对应的页面,如果这个值为空,则会以本页面地址进行跳转,也就是刷新页面

其次,<a> 标签的 href 属性也可以用于锚点跳转,锚 URL - 指向页面中的锚(href="#top"),此时点击a标签,页面会定位到id为top的元素那里

最后,<a> 标签的 href 属性也可以用于路由跳转,href="#/slgl/ywgz",此时点击a标签,会改变页面路径的hash值 ==> http://10.34.0.105/slgl/#/slgl/ywgz,这个常用于现代框架的路由跳转

一般的,如果不想a标签点击有上面三个行为,js方面可以如一楼讲的阻止默认事件,通过a元素href属性本身的特性可以有下面几种:

1、不写href属性,那此时的a元素就是一个本本分分的行内元素,和span标签差不多,不会有下划线,激活样式等特性

2、href='#',意思就是给你一个空锚点,不做跳转操作,但是要注意,会改变url的hash值

3、建议使用的,href="javascript:void(0)"

阻止一下默认行为

a href ="" 默认打开的还是当前页面,会刷新一下重新打开。
a href ="#" 浏览器地址栏网址后面会多显示1个#。不会刷新页面,会回到页面顶部

href="#" 相当于无用链接,不刷新的
href="" 没有链接,刷新的,都是本页面

建议 A 标签的href这样写href="javascript:;"
或者去掉href属性

hq_h
  • 2
新手上路,请多包涵

两个 ## 就好了 既不会跳转 也 不会回到顶部

宣传栏