极客观点
项目管理
HarmonyOS
一个菜单,点击各项更改背景,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> 
<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)"