标签：锚点
作为前端开发人员，对于选项卡或者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>
这样你会发现，慢一点，动感就会强一点。是还是不是？
本文出自 “关注技术专注前端” 博客，请务必保留此出处http://oxoxo.blog.51cto.com/9301862/1621456
标签：锚点
原文地址：http://oxoxo.blog.51cto.com/9301862/1621456
