基于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>
以上就是本文的全部内容，希望对大家的学习有所帮助。
相关文章
封装一个vue中也可使用的uniapp的全局弹窗组件(任何页面都可以弹出)
在写uniapp小程序的时候,弹窗提醒经常会用到,虽然弹窗的组件很多,但是通常别人封装好的弹窗组件自定义度不高,很难匹配自己的ui需求,这篇文章主要给大家介绍了封装一个vue中也可使用的uniapp的全局弹窗组件的相关资料,这个组件在任何页面都可以弹出,需要的朋友可以参考下2023-02-02
这篇文章主要介绍了JavaScript设置body高度为浏览器高度的方法,实例分析了body高度的设置技巧,具有一定参考借鉴价值,需要的朋友可以参考下2015-02-02
这篇文章主要介绍了JavaScript 编写枚举的最有效方法分享，JavaScript语言本身不支持枚举。如果我们想模拟枚举，我们可以使用一个对象。更多相关内容感兴趣的小伙伴可以参考一下2022-06-06
这篇文章主要介绍了js通过iframe加载外部网页的实现代码,需要的朋友可以参考下2015-04-04
这篇文章主要介绍了实现51Map地图接口的示例代码。需要的朋友可以过来参考下，希望对大家有所帮助2013-11-11
这篇文章主要介绍的是一个js确认删除对话框适用于a标签及submit，非常好用，需要的朋友不要错过2014-07-07
微信小程序登录对接Django后端实现JWT方式验证登录详解
这篇文章主要介绍了微信小程序登录对接Django后端实现JWT方式验证登录详解，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧2019-07-07
这篇文章主要介绍了js判断浏览器版本以及浏览器内核的方法,可实现针对各个浏览器的判断,具有一定参考借鉴价值,需要的朋友可以参考下2015-01-01
这篇文章主要为大家详细介绍了ionic环境配置及问题，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2017-06-06
ES6中的迭代器、Generator函数及Generator函数的异步操作方法
这篇文章主要介绍了ES6中的迭代器、Generator函数以及Generator函数的异步操作方法，非常不错，具有一定的参考借鉴价值,需要的朋友可以参考下2019-05-05
最新评论