关于锚点链接跳转---实例一

作为前端开发人员,对于选项卡或者tab切换,都应该不陌生。都知道其是如何实现。在这里就不多说了。

在这里小码哥想说的是一种纯HTML结构可实现另一种方式的内容切换。那就是利用超链接实现锚点点击跳转。a元素作为一种特殊且非常重要的标签。其不单单体现在地址的链接等等上。其还有一种功能就是依据ID进行定点查找跳转。很神奇吧,,,,,,

其实现原理:1、目标元素得有一个ID值。2、a标签中的href得有和目标元素相同的#+ID值。

废话不多说,直接上实例:

HTML部分:

<!doctype html>

<html>

<head>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8">

<title>利用锚点点击跳转</title>

<style type="text/css">

.content{width:1000px;margin:0 auto;}

.cont{height:500px;}

.cont1{background:#666666;}

.cont2{background:#999999;}

.cont3{background:#CCCCCC;}

.cont4{background:#FF0000;}

.cont5{background:#6699CC;}

.cont h4{font-size:16px;}

.pop{width:100px;height:200px;border:1px #00FFFF solid;position:fixed;top:50%;margin-top:-100px;right:50px;list-style:none;margin:0;padding:0;}

.pop li{width:100px;}

.pop li a{display:block;width:100px;height:40px;line-height:40px;text-align:center;font-size:14px;background:#ccc;color:#fff;text-decoration:none;}

.pop li a:hover{background:#6699CC;color:#00FFCC;}

</style>

</head>

<body>

<div class="content">

<div class="cont1 cont"><h4 id="5_1">周一</h4></div><!--cont1-->

<div class="cont2 cont"><h4 id="5_2">周二</h4></div><!--cont2-->

<div class="cont3 cont"><h4 id="5_3">周三</h4></div><!--cont3-->

<div class="cont4 cont"><h4 id="5_4">周四</h4></div><!--cont4-->

<div class="cont5 cont"><h4 id="5_5">周五</h4></div><!--cont5-->

</div><!--content-->

<ul class="pop">

<li><a href="#5_1" title="">星期一</a></li>

<li><a href="#5_2" title="">星期二</a></li>

<li><a href="#5_3" title="">星期三</a></li>

<li><a href="#5_4" title="">星期四</a></li>

<li><a href="#5_5" title="">星期五</a></li>

</ul><!--.pop-->

</body>

</html>

上面的代码是纯HTML+CSS就能搞定的简单的机械的锚点点击跳转实例。有兴趣的朋友,可以自己Copy一下试试。

当然,如果有兴趣的盆友还想让效果更炫一点,不妨试试添加上下面的JS代码。会有意想不到的效果哦。嘎嘎

JS:

<script src="js/jquery1.11.1.min.js" type="text/javascript"></script>

<script type="text/javascript">

$(document).ready(function(){

$("ul.pop li a").click(function() {

$("html, body").animate({

scrollTop: $($(this).attr("href")).offset().top + "px"

}, 500);

return false;

});

});

</script>

这样你会发现,慢一点,动感就会强一点。是还是不是?

时间: 2024-10-11 11:58:25

关于锚点链接跳转---实例一的相关文章

div锚点链接跳转

a标签href可跳转到知道dom节点(通过id) 代码 <!DOCTYPE html> <html> <head> <meta name="viewport" content="width=device-width,initial-scale=1,user-scalable=0"> <title>锚点链接</title> <script src="https://apps.bdi

超链接跳转到不同页面的锚点链接

在做前端的时候,有时会遇到这样一种情况:要在此页面跳转到另一个页面的某个地方.这种情况,就可以使用超链接和锚点链接进行调转了.比如要从index.html页面的某个超链接调转到single.html页面的底部,则此时可在single.html页面底部添加一个锚点.然后在index.html的超链接里加上此锚点的名称即可. index.html页面的超链接: <a href="single.html#CompanyProfile">企业概况</a> single.

jQuery实现页面内锚点平滑跳转

平时我们做导航滚动到内容都是通过锚点来做,刷的一下就直接跳到内容了,没有一丝的滚动效果,而且 url 链接最后会有“小尾巴”,就像#keleyi,今天我就介绍一款 jquery 做的滚动的特效,既可以设置滚动速度,又可以在 url 链接上没有“小尾巴”. 效果体验:http://keleyi.com/keleyi/phtml/jqtexiao/37.htm HTML文件代码: <!DOCTYPE html> <html> <head> <meta charset=

js网址跳转实例代码

js网址跳转实例代码:网址跳转是常用的功能,比如点击一个按钮实现跳转,或者说希望一条新闻打开后可以跳转到其他页面,就可以直接在编辑器中输入跳转代码.下面就简单列举一下js跳转代码,可以根据实际情况选择使用.方式一: window.location.href="http://www.softwhy.com"; 以上代码可以跳转到指定的链接.方式二: window.history.back(-1); 以上代码可以返回之前访问的页面.方式三: self.location="http

锚点链接 阻止a标签跳转

  参考 http://blog.csdn.net/awe5566/article/details/22583699 href="#downJacket" 锚点链接 必须写: 但又想阻止a标签跳转(阻止默认的滚动监听,好自己设置scrollTop), onclick="return fales" <a href="#downJacket" onclick="return false;" >羽绒</a>

JQuery 实现锚点链接之间的平滑滚动

web开发前端一直用JQuery ,真正接触了才体会到,JQuery 原来比我想象的要强大的多,也可能比我体会到的还要强大的多,特别是兼容性那个好,于是把一些好玩的,酷炫的,能够取代 JS 的.统统给用上了. 从 JQuery 引入今天的正题.用 JQuery 实现锚点链接之间的平滑滚动.曾经介绍过一个用 JS 实现的页面锚点跳转缓冲特效,效果相当不错.能够在同一页面的锚点链接之间实现平滑的滚动,可是 JS 代码相对来说比較冗长.如今好了.仅仅要已经载入了 JQuery.我们就能够用较为简短的代

锚点链接

含义: 锚点链接,是在一个网页的不同区域进行跳转 使用步骤: 1  定义锚点(做个记号): <a   name="锚点记号"> </a> 锚点名称的命名规格: 可以包含字母,数字,下划线 以字母打头 <a>和</a> 之间没有内容,即这个记号不是让我们看到,是链接使用的 <a name="top1"></a> 2  跳转到锚点(记号): 语法 <a href="文件名#锚点名称&

html利用锚点实现定位代码实例

html利用锚点实现定位代码实例: 本章节介绍介绍一下如何利用锚点实现定位,使用锚点实现定位是html固有的功能,当然比较简单,也实现了基本的功能,但是功能相对简单一些,如果想要实现平滑的定位可以参阅jquery实现的点击页面动画方式平滑定位到某元素代码一章节. 下面通过代码实例介绍一下html是如何实现锚点定位的. 代码如下: <!DOCTYPE html> <html> <head> <meta charset="utf-8"> &l

jquer导航锚点链接动画效果和返回顶部代码

1 $(function(){ 2 $(".index_nav li a").click(function(event){ //绑定按钮的单击事件 3 var index = this.title; //取得点击按钮的title属性,这里就是按钮的数字 4 // alert(index); 5 var id = "#" + "index_" + index; // 取得需要跳转到的div 的 id 6 // alert(id); 7 $(&quo