基于javascript实现最简单的选项卡切换效果
更新时间：2016年05月16日 15:59:29 作者：朱鹏-天羽
这篇文章主要介绍了基于javascript实现最简单的选项卡切换效果的相关资料，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
本文实例为大家分享了js选项卡切换效果的具体实现代码，供大家参考，具体内容如下
<!DOCTYPE html>
<html>
<head>
<meta charset="gb2312" />
<title>朱朱制作</title>
<script src="js/jquery.js" type="text/javascript"></script>
<style>
*{
margin: 0;
padding: 0;
}
body{
background-color: #fff;
font-family: "微软雅黑";
font-size: 18px;
width: 1000px;
margin: 50px auto;
color:#000000;
}
.wrapper{
width: 350px;
}
#nav ul{
border-bottom: 2px solid yellowgreen;
height: 32px;
}
#nav li{
display: inline-block;
border: 2px solid #999;
border-bottom: none;
margin-left: 10px;
width: 65px;
text-align: center;
line-height: 30px;
}
#nav li:hover{
cursor: pointer;
}
#content{
display: block;
border: 1px solid blue;
border-top: none;
text-align: center;
height: 100px;
line-height: 100px;
}
#nav li.on{
border-bottom: solid 2px #ffffff;
}
.hide{
display: none;
}
.show{
display: block;
}
</style>
</head>
<script type="text/javascript">
/*window.onload=change; //js代码实现
function change(){
this.nav=document.getElementById("nav");
this.li=nav.getElementsByTagName("li");
this.cont=document.getElementById("content");
this.divi=cont.getElementsByTagName("div");
for(var i=0;i<li.length;i++){
li[i].index=i;
li[i].onclick=function(){
for(var i=0;i<li.length;i++){
li[i].className="";
divi[i].className="hide";
}
li[this.index].className="on";
divi[this.index].className="show";
}
}
}*/
$(function(){
$('#nav li').each(function(){
$(this).click(function(){
$('#nav li').removeClass("on");
$(this).addClass("on");
$("#content div").removeClass();
$("#content div").eq($(this).index()).addClass("show").siblings().addClass("hide");
})
})
})
</script>
<body>
<div class="wrapper">
<div id="nav">
<ul>
<li class="on">num1</li>
<li>num2</li>
<li>num3</li>
<li>num4</li>
</ul>
</div><div id="content">
<div class="show">content1</div>
<div class="hide">content2</div>
<div class="hide">content3</div>
<div class="hide">content4</div>
</div>
</div>
</body>
</html>
以上就是本文的全部内容，希望对大家的学习有所帮助。
相关文章
这篇文章主要为大家详细介绍了小程序实现手写签名功能，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2022-07-07
这篇文章主要为大家详细介绍了如何利用HTML+CSS+JS实现中国象棋游戏，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2022-08-08
通过JS解决页面刷新导致按钮OnClientClick事件消失问题
这篇文章主要介绍了如何通过JS解决页面刷新导致按钮OnClientClick事件消失问题,OnClientClick 提供客户端JS执行能力,并以 return false 或 return true 来决定是否继续执行 OnClick 事件,需要的朋友可以参考下2024-12-12
在JavaScript中，我们经常需要对数组中对象的属性进行统计。在本文中，我们将介绍如何使用JavaScript来实现这一功能，文中有详细的代码示例，需要的朋友可以借鉴参考2023-05-05
这篇文章主要为大家详细介绍了微信小程序实现页面浮动导航，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2019-01-01
这篇文章主要介绍了JavaScript 删除小数点后的数字实例代码，代码简单易懂，对大家的学习或工作具有一定的参考借鉴价值，需要的朋友可以参考下2023-07-07
这篇文章主要介绍了JavaScript实现获取dom中class的方法,涉及javascript操作dom节点的使用技巧,需要的朋友可以参考下2015-02-02
这篇文章主要介绍了token 机制和实现方式的相关资料，帮助大家更好的理解和学习token，感兴趣的朋友可以了解下2020-12-12
这篇文章主要介绍了JavaScrip如果基于url实现图片下载,文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下2020-07-07
今天小编就为大家分享一篇layui select获取自定义属性方法，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧2018-08-08
最新评论