为了账号安全,请及时绑定邮箱和手机立即绑定

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

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

ABOUTYOU 2019-03-07 14:15:42
一个菜单,点击各项更改背景,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 回答

?
倚天杖

TA贡献1828条经验 获得超3个赞

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

查看完整回答
反对 回复 2019-03-22
?
holdtom

TA贡献1805条经验 获得超10个赞

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

查看完整回答
反对 回复 2019-03-22
?
12345678_0001

TA贡献1802条经验 获得超5个赞

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

查看完整回答
反对 回复 2019-03-22
  • 4 回答
  • 0 关注
  • 3365 浏览
慕课专栏
更多

添加回答

举报

0/150
提交
取消
意见反馈 帮助中心 APP下载
官方微信