带左向右的选项卡
带左向右的选项卡
提问于 2013-08-16 17:40:03
我做了一个标签一切都好。但我不能左/右滑动。主要是我想要幻灯片动画像http://www.slidetabs.com/。知道怎么做吗？查看我在http://jsfiddle.net/ZXYTW/1/的代码
下面是我的js代码：
initHomeTabs=function(){
//click Event for all tabs:
$('.tabs li').click(function(){
$(".tab").css('display','none');
$(".tabs li").removeClass('selected');
$(this).addClass('selected')
$('#'+this.childNodes[0].href.split('#')[1]).slideToggle("slow");
return false;
})
//set first tab active
$('.tabs li').eq(0).click();
}
// call above function on dom ready event
$(document).ready(function(){
initHomeTabs();
});回答 1
Stack Overflow用户
回答已采纳
发布于 2013-08-16 19:27:49
演示
尝尝这个。我已经编辑了你的代码
把这个加到你的头标签上
<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;
}这是一个有用的工作小提琴演示 .Hope
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/18279133
复制相关文章
相似问题
腾讯云开发者
