关于锚点的几则
锚点跳转就是根据url跳转，做的一项定位
一般有两种方法： 1. a标签的name属性 2. id
考虑每次使用a的name有点浪费标签，所以建议使用id
代码块
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>锚点</title>
<style>
.container{width: 850px;height: 880px;text-align: center;margin: 0 auto;}
.return{position: fixed;bottom: 50px;}
</style>
</head>
<body>
<div class="container">
<img src="http://maopeijiong.site/src/img/grimm.jpg" alt="格林猎人图片一张" id="re"></img>
</div>
<a href="#re"><p class="return">返回至图片</p></a>
</body>
</html>
查看效果
一些想法
注意到点击返回后的url变成了
url里多了一个hash，是这么叫的吧(反正chrome里是location.hash这么叫的)。所以这锚点跳转可以看到一个链接跳转，和点击滚动事件(jquery 的offset().top)还是有本质区别的，不过jquery跳转平缓很多，锚点跳转感官上不咋地。
纯css实现的切换
锚点跳转也算是css跳转，突然想到用label的属性实现的内容切换，就一并复习下。
代码块
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>label切换内容
</title>
<style>
.container{width: 800px;height: 250px;margin: 0 auto;position: relative;}
.tab{width: 25%;float: left;margin-right: -1px;box-sizing: border-box;}
.tab .testTabLabel{text-align: center;display: block;background: #e2e2e2;height: 24px;padding: 5px 0;border: 1px solid #ccc;}
.tab .test-radio, .tab .testTabCon{position: absolute;left: -999em;}
.test-radio:checked ~ .testTabLabel{border-bottom: 1px solid #fff;background: #fff;position: relative;z-index: 1;}
.test-radio:checked ~ .testTabCon{left: 0;border: 1px solid #ccc;border-top: 0;width: 763px;padding: 2em 1em;}
</style>
</head>
<body>
<div class="container">
<div class="tab">
<input type="radio" id="testTabOne" class="test-radio" name="tab" checked="checked"/>
<label class="testTabLabel" for="testTabOne">选项1
</label>
<div class="testTabCon">
<p>第一张选项卡的内容
</p>
</div>
</div>
<div class="tab">
<input type="radio" id="testTabTwo" class="test-radio" name="tab"/>
<label class="testTabLabel" for="testTabTwo">选项1
</label>
<div class="testTabCon">
<p>第二张选项卡的内容
</p>
</div>
</div>
<div class="tab">
<input type="radio" id="testTabThree" class="test-radio" name="tab"/>
<label class="testTabLabel" for="testTabThree">选项1
</label>
<div class="testTabCon">
<p>第三张选项卡的内容
</p>
</div>
</div>
<div class="tab">
<input type="radio" id="testTabFour" class="test-radio" name="tab"/>
<label class="testTabLabel" for="testTabFour">选项1
</label>
<div class="testTabCon">
<p>第四张选项卡的内容
</p>
</div>
</div>
</div>
</body>
</html>
查看效果
转载请注明原文地址: https://ju.6miu.com/read-671042.html
