基于javascript实现最简单的选项卡切换效果


Posted in Javascript onMay 16, 2016

本文实例为大家分享了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>

以上就是本文的全部内容,希望对大家的学习有所帮助。

Javascript 相关文章推荐
在js(jquery)中获得文本框焦点和失去焦点的方法
Dec 04 Javascript
Javascript实现获取窗口的大小和位置代码分享
Dec 04 Javascript
javascript中的正则表达式使用指南
Mar 01 Javascript
javascript数组去重方法汇总
Apr 23 Javascript
浅谈JavaScript中的Math.atan()方法的使用
Jun 14 Javascript
jQuery实现彩带延伸效果的网页加载条loading动画
Oct 29 Javascript
Linux系统中利用node.js提取Word(doc/docx)及PDF文本的内容
Jun 17 Javascript
Vue 去除路径中的#号
Apr 19 Javascript
vue-cli3+typescript新建一个项目的思路分析
Aug 06 Javascript
解决vue的过渡动画无法正常实现问题
Oct 31 Javascript
JS实现容器模块左右拖动效果
Jan 14 Javascript
ES6 class类链式继承,实例化及react super(props)原理详解
Feb 15 Javascript
JavaScript实现页面跳转的方式汇总
May 16 #Javascript
js实现页面跳转的几种方法小结
May 16 #Javascript
WebApi+Bootstrap+KnockoutJs打造单页面程序
May 16 #Javascript
KnockoutJs快速入门教程
May 16 #Javascript
JS学习之表格的排序简单实例
May 16 #Javascript
JavaScript操作选择对象的简单实例
May 16 #Javascript
JS组件Bootstrap实现图片轮播效果
May 16 #Javascript
You might like
让PHP支持断点续传的源码
2010/05/16 PHP
《PHP编程最快明白》第二讲 数字、浮点、布尔型、字符串和数组
2010/11/01 PHP
PHP中对用户身份认证实现两种方法
2011/06/04 PHP
JavaScript中判断页面关闭、页面刷新的实现代码
2014/08/27 Javascript
使用JS画图之点、线、面
2015/01/12 Javascript
jquery滚动加载数据的方法
2015/03/09 Javascript
jquery实现用户打分评分特效
2015/05/28 Javascript
jQuery实现表单步骤流程导航代码分享
2015/08/28 Javascript
jQuery实现Meizu魅族官方网站的导航菜单效果
2015/09/14 Javascript
全面解析Bootstrap排版使用方法(文字样式)
2015/11/30 Javascript
利用Javascript实现BMI计算器
2016/08/16 Javascript
js实现无缝循环滚动
2020/06/23 Javascript
AngularJS动态添加数据并删除的实例
2018/02/27 Javascript
JS实现的简单分页功能示例
2018/08/23 Javascript
原生JS实现简单的倒计时功能示例
2018/08/30 Javascript
详解JS判断页面是在手机端还是在PC端打开的方法
2019/04/26 Javascript
vue实现歌手列表字母排序下拉滚动条侧栏排序实时更新
2019/05/14 Javascript
element-ui tree结构实现增删改自定义功能代码
2020/08/31 Javascript
[04:41]2014DOTA2国际邀请赛 Liquid顺利突围晋级正赛
2014/07/09 DOTA
Python中给List添加元素的4种方法分享
2014/11/28 Python
python使用电子邮件模块smtplib的方法
2016/08/28 Python
Python函数参数操作详解
2018/08/03 Python
Python中文件的写入读取以及附加文字方法
2019/01/23 Python
Python如何把多个PDF文件合并代码实例
2020/02/13 Python
Python+Kepler.gl实现时间轮播地图过程解析
2020/07/20 Python
Python sqlalchemy时间戳及密码管理实现代码详解
2020/08/01 Python
雷曼兄弟的五金店:Lehman’s Hardware Store
2019/04/10 全球购物
住宅使用说明书
2014/05/09 职场文书
技术岗位竞聘演讲稿
2014/05/16 职场文书
注册资产评估专业求职信
2014/07/16 职场文书
祖国在我心中演讲稿200字
2014/08/28 职场文书
县长“四风”对照检查材料思想汇报
2014/10/05 职场文书
2014全年工作总结
2014/11/27 职场文书
事业单位年度考核个人总结
2015/02/12 职场文书
民主评议党员个人总结
2015/02/13 职场文书
Python基础之赋值,浅拷贝,深拷贝的区别
2021/04/30 Python