演示
尝试这个。我已经编辑了你的代码
将此添加到您的头部标签
<script type="text/javascript" src="http://demos.flesler.com/jquery/scrollTo/js/jquery.scrollTo-min.js"></script>
jQuery
$(document).ready(function(){
$(document).on('click', '.tabs li a ', function () {
$(".tabs li").removeClass('selected');
$(this).closest("li").addClass('selected')
var panel = $(this).data('href');
$.scrollTo(panel, 400);
});
});
html代码
<div class="content">
<div id="Appointments" class="tab">Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make</div>
<div id="Enews" class="tab">Contrary to popular belief, Lorem Ipsum is not simply random text. It has roots in a piece of classical Latin literature from 45 BC,.</div>
<div id="Brochure" class="tab">There are many variations of passages of Lorem Ipsum available, but the majority have suffered alteration in some form, by injected humour.</div>
</div>
<ul class="tabs">
<li><a data-href="#Appointments">Appointments </a>
</li>
<li><a data-href="#Enews">Enews </a>
</li>
<li><a data-href="#Brochure">Brochure </a>
</li>
</ul>
样式表
body {
overflow: hidden;
}
div.content div {
position: absolute;
width:100%;
top:25px;
left:0px;
}
#Appointments {
left:0px;
}
#Enews {
left:100%;
}
#Brochure {
left:200%;
}
.tabs {
margin-left:10px;
position: fixed;
}
.tabs li {
background:none;
background:#736c61;
padding:5px;
float:left;
list-style:none
}
.tabs li.selected {
background:#e3d5af;
top: -1px;
position: relative;
}
.tabs li.selected a {
color:white;
}
.tabs li a {
color:white;
text-decoration:none;
margin-right:15px;
cursor:pointer;
}
.tab {
background:#e3d5af;
color:#312822;
border: 1px solid #756e64;
}
这是工作小提琴演示 。希望这会有所帮助