js选项卡的制作方法
更新时间：2017年01月23日 08:34:03 作者：%阳阳羊%
这篇文章主要为大家详细介绍了js选项卡的制作方法，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
本文实例为大家分享了js选项卡的具体代码，供大家参考，具体内容如下
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>选项卡</title>
</head>
<style>
/*复位*/
*{padding:0;margin:0;}
div#tabs{
width:600px;
height:400px;
margin:100px auto;
position:relative;
}
.tab{
width:100px;
height:50px;
position:absolute;
top:0;
}
input.tab{
z-index:11;
opacity:0;
cursor:pointer;
}
a.tab{
z-index:10;
text-align:center;
line-height:50px;
text-decoration:none;
color:black;
font-size:30px;
}
.tab1{
left:0px;
}
.tab2{
left:100px;
}
.tab3{
left:200px;
}
/*鼠标滑过*/
input.tab:hover+a{
background-color:#ccc;
}
/*鼠标点击*/
input.tab:checked+a{
border:1px solid #ccc;
border-bottom:none;
background-color:white;
}
/*scroll设置*/
div#scroll{
position:absolute;
top:50px;
width:100%;
height:350px;
border:1px solid #ccc;
overflow:hidden;
}
div#scroll>div.content{
width:100%;
height:100%;
position:absolute;
top:0;
left:100%;
padding:15px;
transition:all 0.6s linear;
}
input.tab1:checked~div#scroll>div.content1,
input.tab2:checked~div#scroll>div.content2,
input.tab3:checked~div#scroll>div.content3{
left:0%;
}
</style>
<body>
<div id="tabs">
<input type="radio" name="tab" class="tab tab1" checked />
<a href="#" class="tab tab1">选项一</a>
<input type="radio" name="tab" class="tab tab2"/>
<a href="#" class="tab tab2">选项二</a>
<input type="radio" name="tab" class="tab tab3"/>
<a href="#" class="tab tab3">选项三</a>
<div id="scroll">
<div class="content content1">
哈哈111<br/>
哈哈111<br/>
哈哈111<br/>
哈哈111<br/>
哈哈111<br/>
</div>
<div class="content content2">
哈哈222<br/>
哈哈222<br/>
哈哈222<br/>
哈哈222<br/>
哈哈222<br/>
</div>
<div class="content content3">
哈哈333<br/>
哈哈333<br/>
哈哈333<br/>
哈哈333<br/>
哈哈333<br/>
</div>
</div>
</div>
</body>
</html>
效果图：
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持脚本之家。
相关文章
ES2015 推出了JS 的 Promise ，而在没有原生支持的时候，我们也可以使用诸如 Promises/A+ 的库的帮助，在我们的代码里实现Promise 的支持，下面这篇文章主要给大家介绍了如何从零开始利用js手写一个Promise库的相关资料，需要的朋友可以参考下。2018-04-04
相信大家都知道数据可视化就是借助图形化的手段把生硬的数据生动化，以此来展示出数据想要表达的信息，而图表是最通常的一种数据可视化手段。可全靠自己纯手动编写各种图表实在是让人头疼，各种计算各种烦。现在就为大家介绍如何用D3.js来实现柱状图。2016-09-09
本文主要介绍了Webpack提取页面公共资源的实现，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧2023-01-01
最近掌门人在写3D游戏,对于其中的物理效果很感兴趣,今天我将使用纯JavaScript来实现一个简易的物理模拟,其中包括碰撞检测与响应、摩擦力与空气阻力、以及物体的破坏效果,文中通过代码示例讲解的非常详细,需要的朋友可以参考下2024-01-01
这篇文章主要为大家详细介绍了bootstrap fileinput实现文件上传功能，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2017-08-08
时间函数应用加、减、比较、格式转换等等，具体实现如下，感兴趣的朋友可以参考下，希望对大家有所帮助2013-08-08
这篇文章主要介绍了js实现表单多按钮提交action的处理方法，需要的朋友可以参考下2015-10-10
本文给大家分享的是javascript通过setTimeout实现延时显示提示框的特效代码，效果非常棒，这里推荐给大家2016-04-04
本篇文章主要介绍了two.js之实现动画效果示例，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧2017-11-11
使用Javascript和DOM Interfaces来处理HTML
使用Javascript和DOM Interfaces来处理HTML...2006-10-10
最新评论