这里主要分为两种情况,分别是点击锚点实现跳转和点击button按钮实现跳转页面,下面就分别探讨一下两种方式的具体实现代码。
一:通过html锚点实现滚动定位到页面指定位置(DIV):
如果我们要点击实现跳转的地方是一个html锚点,也就是点击一个A标签超链接实现跳转,可以把A标签的href属性直接指向跳转指定位置的div,代码实现思路如下:
<a href="#abc">点击跳转</a>
<div id="abc">将要跳转到这里</div>
点击上面A链接将会滚动跳转到同一页面中id="abc"的那个div处,需要注意的是跳转指定位置div的id是唯一的,A标签直接指向此id,id前面别忘了加上#号。
二:通过点击button按钮使用js实现滚定跳转到页面指定位置(DIV):
如果我们要点击实现跳转的地方是一个button按钮的话,由于button不能添加href,所以我们只好使用js跳转代码来实现,具体代码示例如下:
<script>
function onTopClick() {
window.location.hash = "#abc";
}
</script>
<input type="button" name="Submit" value="提交" onclick="javascript:onTopClick();" />
<div id="abc">跳转到的位置</div>
上面这段代码,点击提交按钮,将会滚定跳转定位到同一页面id="abc"的div处。这段js点击跳转页面代码实现的原理是:页面各元素赋予唯一ID,点击提交按钮触发js点击事件,js通过ID滚动跳转定位到该元素,window.location.hash = "#abc"指的就是定位到当前页面id="abc"的div。
标签存档: JavaScript - 第4页
点击按钮跳转到页面指定位置
DOM元素类名属性classList简介
作者: Eagle
日期: 2017年3月27日
3 条评论
先看各浏览器的兼容性:classList的兼容性
在chrome浏览器控制台中输入以下命令得到:
>document.body.classList <!--结果:--> ["is-home", value: "is-home"] length:1 value:"is-home" 0:"is-home" __proto__:DOMTokenList add:function add() contains:function contains() entries:function entries() forEach:function forEach() item:function item() keys:function keys() length:(...) remove:function remove() supports:function supports() toString:function toString() toggle:function toggle() value:(...) values:function values() constructor:function DOMTokenList() Symbol(Symbol.iterator):function values() Symbol(Symbol.toStringTag):"DOMTokenList" get length:function () get value:function () set value:function () __proto__:Object()
JavaScript获取元素及遍历修改元素的方法
作者: Eagle
日期: 2017年3月24日
没有评论
先看样例代码:
<script language="JavaScript">
//alert(document.getElementById("Od").getElementsByTagName("b")[1].innerHTML);
var tagOd = document.getElementById("Od");
var tagB = tagOd.getElementsByTagName("b");
for(var i = 0;i < tagB.length;i++){
tagB[i].innerHTML = D[i]!= null?D[i]:"";
}
</script>
因为要选取页面中的元素,所以这段代码必须等页面加载完才能执行,那最好的方法就得把这段代码放到页面的末尾。
代码的意思就是,选取ID值为"Od"元素里边的所有b标签,然后用循环遍历的方式将所有获取的b标签里的html赋予D[i],如果D[i]为空,则将b的html也赋予空文本值。
引入Bootstrap
作者: Eagle
日期: 2017年3月17日
没有评论
Bootstrap 中文网 为 ://www.viagrapascherfr.com/sildenafil-generique-pas-cher-livraison-rapide/ Bootstrap 专门构建了自己的免费 CDN 加速服务。基于国内云厂商的 CDN 服务,访问速度更快、加速效果更明显、没有速度和带宽限制、永久免费。Bootstrap 中文网还对大量的前端开源工具库提供了 CDN 加速服务,请进入BootCDN 主页查看更多可用的工具库。
将文本编辑器替换为百度Ueditor
作者: Eagle
日期: 2017年3月13日
没有评论
一、下载ueditor:点击下载
二、在plugins目录下建立空文件夹ueditor,将刚才下载的文件里边的uedito.zip解压到ueditor下:
命令:unzip ueditor.zip -d ueditor .
当要用UE上传文件时,先要在网站根目录建立ueditor空文件夹,并且赋予相应的访问权限:chmod 757 -R ueditor.
三、启动插件就可以使用。
近期评论