国内装饰行业网站开发,wordpress调取多个分类文章,公益网站建设 参考文献,wordpress查看需要密码今天在做一个例子#xff0c;就是很常见的点击展开全文。 我觉得这是一个很简单的效果#xff0c;也就几行代码的事#xff0c;结果点击了以后立刻隐藏不见#xff0c;控制台代码也不报错#xff0c;耽误了我很长时间#xff0c;最后才发现问题出在超链接身上。 “展开全…今天在做一个例子就是很常见的点击展开全文。 我觉得这是一个很简单的效果也就几行代码的事结果点击了以后立刻隐藏不见控制台代码也不报错耽误了我很长时间最后才发现问题出在超链接身上。 “展开全文”是一个超链接html代码如下。
a href classshowAll展开全文/a为了使 超链接显示如图所示的效果它的CSS代码如下向下的箭头这里是用图片做背景实现的。 .showAll{text-decoration: none;display: block;width: 120px;height: 34px;line-height: 34px;border: 1px solid #d8e7d4;border-radius: 20px; text-align: center;color:#318510;background: url(./images/showall2.png) no-repeat 95px center #e9f4e5;}javaScript代码如下。 scriptwindow.addEventListener(load, function() {var whole document.querySelector(.showAll)whole.addEventListener(click,function() {document.querySelector(.intro).style.display blockthis.style.display none})})/script结果按照以上的代码运行的时候显示后快速消失而其实js代码并没有语法逻辑等错误我后来把click换成mouseover可以正常执行说明问题出在click点击事件上。而点击对于超链接会带来什么问题呢超链接有默认的访问行为我觉得自己找到了问题所在去看了一下html代码果然在敲代码的时候href“”里面什么也没有我改成了href“#”就正常了。 为了程序更严谨有两种方法 第一种方法可以把超链接按如下方式写
a hrefjavascript:void(0); classshowAll展开全文/a使用javascript:void(0);当用户点击以后不会发生任何事从而去掉超链接的默认访问行为。
第二种方法如果不修改html代码还可以使用preventDefault()阻止默认行为传递参数event在javascript中加上一句 e.preventDefault() 代码如下。 scriptwindow.addEventListener(load, function() {var whole document.querySelector(.showAll)whole.addEventListener(click,function(e) {e.preventDefault() // 阻止超链接的默认行为document.querySelector(.intro).style.display block //隐藏的部分显示this.style.display none})})/script
