锚点

2024-04-27 14:26:58

字体：大中小

来源：转载

供稿：网友

锚点

一、介绍
有两种使用<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属性只对&lt;a&gt;标签有用。<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>

View Code

效果：