基于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 相关文章推荐
jquery 插件开发 extjs中的extend用法小结
Jan 04 Javascript
jQuery实现级联菜单效果(仿淘宝首页菜单动画)
Apr 10 Javascript
js实现点击链接后延迟3秒再跳转的方法
Jun 05 Javascript
jQuery实现带有洗牌效果的动画分页实例
Aug 31 Javascript
JavaScript拖拽、碰撞、重力及弹性运动实例分析
Jan 08 Javascript
js实现一个可以兼容PC端和移动端的div拖动效果实例
Dec 09 Javascript
javaScript基础详解
Jan 19 Javascript
vue中路由验证和相应拦截的使用详解
Dec 13 Javascript
Vue.js 利用v-for中的index值实现隔行变色
Aug 01 Javascript
在React项目中使用Eslint代码检查工具及常见问题
Oct 10 Javascript
vue-cli配置全局sass、less变量的方法
Jun 06 Javascript
解决vue项目运行npm run serve报错的问题
Oct 26 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若干单维数组遍历方法的比较
2011/09/20 PHP
php打开远程文件的方法和风险及解决方法
2013/11/12 PHP
PHP Web木马扫描器代码分享
2015/09/06 PHP
PHP基于ORM方式操作MySQL数据库实例
2017/06/21 PHP
IE JS编程需注意的内存释放问题
2009/06/23 Javascript
javascript 操作文件 实现方法小结
2009/07/02 Javascript
jQuery 扩展对input的一些操作方法
2009/10/30 Javascript
通过身份证号得到出生日期和性别的js代码
2009/11/23 Javascript
JS事件Event元素(兼容IE,Firefox,Chorme)
2012/11/01 Javascript
Jquery加载时从后台读取数据绑定到dropdownList实例
2013/06/09 Javascript
鼠标拖拽移动子窗体的JS实现
2014/02/25 Javascript
javascript事件绑定学习要点
2016/03/09 Javascript
JavaScript中函数声明与函数表达式的区别详解
2016/08/18 Javascript
详解Vue-cli 创建的项目如何跨域请求
2017/05/18 Javascript
vue2.0 keep-alive最佳实践
2017/07/06 Javascript
Jquery中.bind()、.live()、.delegate()和.on()之间的区别详解
2017/08/01 jQuery
webpack 开发和生产并行设置的方法
2018/11/08 Javascript
JS实现的检验身份证格式并输出出生日期,年龄,性别,出生地示例
2019/05/17 Javascript
vue引入微信sdk 实现分享朋友圈获取地理位置功能
2019/07/04 Javascript
基于javascript实现碰撞检测
2020/03/12 Javascript
Vue项目中数据的深度监听或对象属性的监听实例
2020/07/17 Javascript
python基础教程之循环介绍
2014/08/29 Python
Python的Flask框架中实现登录用户的个人资料和头像的教程
2015/04/20 Python
全面了解Python的getattr(),setattr(),delattr(),hasattr()
2016/06/14 Python
关于Python如何避免循环导入问题详解
2017/09/14 Python
python django框架中使用FastDFS分布式文件系统的安装方法
2019/06/10 Python
Python调用graphviz绘制结构化图形网络示例
2019/11/22 Python
python实现监控阿里云账户余额功能
2019/12/16 Python
Python逐行读取文件内容的方法总结
2020/02/14 Python
Python命名空间及作用域原理实例解析
2020/08/12 Python
美国宠物用品网站:Value Pet Supplies
2018/03/17 全球购物
领先的荷兰线上超市:荷兰之家Holland at Home(支持中文)
2021/01/21 全球购物
工作会议方案
2014/05/21 职场文书
工商管理专业毕业生求职信
2014/05/26 职场文书
大学考试作弊检讨书
2015/05/06 职场文书
Mysql数据库按时间点恢复实战记录
2021/06/30 MySQL