在html中设置锚点定位我知道的有几种方法，使用id定位、使用name定位、使用js定位，这些方法大家可以参考下
在html中设置锚点定位我知道的有几种方法，在此和大家分享一下：
1、使用id定位：
这是一个导航的特例，在href属性中使用id跳转到相应内容的切换：
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title>Bootstrap中的导航</title>
<link rel="stylesheet" href="dist/css/bootstrap.css"/>
</head>
<body>
<ul class="nav nav-pills" >
<li class="active"><a href="#home" data-toggle="pill">Home</a></li>
<li ><a href="#profile" data-toggle="tab">Profile</a></li>
<li ><a href="#messages" data-toggle="tab">Messages</a></li>
</ul>
<!-- Tab panes -->
<div class="tab-content">
<div role="tabpanel" class="tab-pane active" id="home">jean shorts Austin. Nesciunt tofu stumptown aliqua, retro synth master cleanse. Mustache cliche tempor, williamsburg carles vegan helvetica. Reprehenderit butcher retro keffiyeh dreamcatcher synth. Cosby sweater eu banh mi, qui irure terry richardson ex squid. Aliquip placeat salvia cillum iphone. Seitan aliquip quis cardigan american apparel, butcher voluptate nisi qui.</div>
<div role="tabpanel" class="tab-pane" id="profile">Raw denim you probably haven't heard of them</div>
<div role="tabpanel" class="tab-pane" id="messages">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi id neque quam. Aliquam sollicitudin venenatis ipsum ac feugiat. Vestibulum ullamcorper sodales nisi nec condimentum. Mauris convallis mauris at pellentesque volutpat.</div>
</div>
<script src="dist/js/jquery-1.11.3.js"></script>
<script src="dist/js/bootstrap.js"></script>
</body>
</html>
2.纯CSS实现tab跳转，巧妙的使用了input标签的id和label标签的for属性，以及CSS中的checked伪类选择器。
参见 http://www.zhangxinxu.com/study/201201/css-radio-tab-switch.html
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title>锚点跳转</title>
<style>
.testbox {
60%;
min-height: 250px;
margin: 1em auto;
position: relative;
}
.test_tab{
30%;
margin-right: -1px;
border: 1px solid #ccc;
border-bottom: 0;
float: left;
}
.test_label1{
display: block;
padding-top: 5px;
padding-bottom: 5px;
background-color: #eee;
text-align: center;
}
.test_radio,
.test_tab_content {
position: absolute;
left: -999em;
}
.test_radio:checked ~ .test_tab_content {
margin-top: -1px;
padding: 1em 2em;
border: 1px solid #ccc;
left: 0;
right: 0;
}
.test_radio:checked ~.test_label1 {
background-color: #fff;
border-bottom: 1px solid #fff;
position: relative;
z-index: 1;
}
</style>
</head>
<body>
<div class="testbox">
<div class="test_tab">
<input type="radio" class="test_radio" id="testRadio1" checked="checked" name="tab"/>
<label for="testRadio1" class="test_label1">选项卡1</label>
<div class="test_tab_content">
<p>我是选项卡1下的萌宝</p>
<img src="images/27976.jpg" width="210px"/>
</div>
</div>
<div class="test_tab">
<input type="radio" id="testRadio2" class="test_radio" name="tab"/>
<!--这里要使用name属性，若不使用，p标签下的字会重复覆盖-->
<label for="testRadio2" class="test_label1">选项卡2</label>
<div class="test_tab_content">
<p>我是选项卡2下的萌宝</p>
<img src="images/30222.jpg" width="210px"/>
</div>
</div>
<div class="test_tab">
<input type="radio" id="testRadio3" class="test_radio" name="tab"/>
<label for="testRadio3" class="test_label1">选项卡3</label>
<div class="test_tab_content">
<p>我是选项卡3下的萌宝</p>
<img src="images/31521.jpg" width="210px"/>
</div>
</div>
</div>
</body>
</html>
实现效果如下：
