一、介绍
有两种使用<a>标签的方式：
1、通过href属性——创建指向另一个文档的链接
2、通过使用name属性——创建文档内的书签
name属性规定锚(anchor)的名称。
1、name定位
使用name，只能在<a>标签上用，所以总结为“a标签+name属性”。
2、ID定位
使用id可以在任意标签使用。
3、js定位
使用js使用scroollIntoView将对象滚动到可见范围内。
例子如下：“到top”使用id，“到content”使用a标签+name属性，“到bottom”使用js代码。
<!doctype html> <html> <title>锚点 by starof</title> <meta charset="utf-8"/> <style type="text/css"> .cls1,.cls2,.cls3{ width: 500px; height: 600px; } .cls1{ background-color: red; } .cls2{ background-color: green; } .cls3{ background-color: blue; } </style> <body> <a href="#top">到top</a><br/> <a href="#content">到content</a><br/> <a onclick="javascript:document.getElementById('here').scrollIntoView()" style="cursor:pointer;">到bottom</a> <div id="top" class="cls1">top内容 </div> <div name="content" class="cls2"><a name="content">content内容</a><br/> name属性只对<a>标签有用。<br/> 可以通过给div增加name="content" ，删除内部超链接查看。 </div> <div id="here" class="cls3">bottom内容 </div> </body> <script type="text/javascript"> </script> </html>
二、用锚点实现的选项卡效果
张鑫旭有这样一个demo，代码：
<!doctype html> <html> <title>锚点 by starof</title> <meta charset="utf-8"/> <style type="text/css"> .box{ width: 200px; height: 100px; border: 1px solid #ddd; overflow: hidden; } .list{ width: 200px; height: 100px; line-height: 100px; background-color: #eee; font-size: 80px; text-align: center; } .link{ width:200px; padding-top:10px; text-align:right;} .click{ display:inline-block; width:20px; height:20px; line-height:20px; border:1px solid #ccc; background:#f7f7f7; color:#333; font-size:12px; font-weight:bold; text-align:center; text-decoration:none;} .click:hover{ background:#eee; color:#345;} </style> <body> <div class="box"> <div class="list" id="one">1</div> <div class="list" id="two">2</div> <div class="list" id="three">3</div> <div class="list" id="four">4</div> </div> <div class="link"> <a class="click" href="#one">1</a> <a class="click" href="#two">2</a> <a class="click" href="#three">3</a> <a class="click" href="#four">4</a> </div> <script type="text/javascript"></script> </body> </html>
效果如下：点我查看
正美用锚点做了这样一个效果：
代码如下：
<!doctype html> <html> <title>锚点 by starof</title> <meta charset="utf-8"/> <style type="text/css"> dl {/*相册*/ position:relative; width:160px; height:142px; border:10px solid #EFEFDA;/*相册边框*/ } dd {/*相册的内容显示区，包含相片与下面的翻页栏*/ margin:0;/*去除浏览器的默认设置*/ padding:0;/*去除浏览器的默认设置*/ width:160px; height:120px; overflow:hidden;/*重点，让每次只显示一张图片*/ } img { border:2px solid #000;/*增加立体感*/ } dt {/*翻页栏*/ position:absolute; right:0px; bottom:0px; /*上面三步是用于把它固定于图片下方*/ width:160px; height:22px; background:#FBFBEA; } a { display:block;/*让其拥有盒子模型*/ float:right; margin:2px;/*错开格子*/ width:18px;/*呈正方形*/ height:18px; text-align:center;/*居中显示*/ color:#fff;/*默认是蓝色，所以一定要重写*/ text-decoration:none;/*消除下划线*/ background:#666; filter:alpha(opacity=70); opacity:.7; } a:hover { background:#000 } </style> <body> <dl> <dt> <a href="#index6">6</a><a href="#index5">5</a><a href="#index4">4</a><a href="#index3">3</a><a href="#index2">2</a><a href="#index1">1</a> </dt> <dd> <img id="index1" src="http://images.cnblogs.com/cnblogs_com/rubylouvre/199042/o_001.jpg" /> <img id="index2" src="http://images.cnblogs.com/cnblogs_com/rubylouvre/199042/o_002.jpg" /> <img id="index3" src="http://images.cnblogs.com/cnblogs_com/rubylouvre/199042/o_003.jpg" /> <img id="index4" src="http://images.cnblogs.com/cnblogs_com/rubylouvre/199042/o_004.jpg" /> <img id="index5" src="http://images.cnblogs.com/cnblogs_com/rubylouvre/199042/o_005.jpg" /> <img id="index6" src="http://images.cnblogs.com/cnblogs_com/rubylouvre/199042/o_006.jpg" /> </dd> </dl> </body> </html>
效果：
另参考
http://www.impressivewebs.com/javascript-content-switcher-without-javascript/ http://www.impressivewebs.com/demo-files/content-switcher/#five