基于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 相关文章推荐
JavaScript 空位补零实现代码
Feb 26 Javascript
input 输入框内的输入事件详细分析
Mar 17 Javascript
jQuery基础框架浅入剖析
Dec 27 Javascript
从数据结构分析看:用for each...in 比 for...in 要快些
Apr 17 Javascript
用js设置下拉框为只读的小技巧
Apr 10 Javascript
基于jquery实现的自动补全功能
Mar 12 Javascript
浅谈React 属性和状态的一些总结
Nov 21 Javascript
深入学习Bootstrap表单
Dec 13 Javascript
JS实现淡入淡出图片效果的方法分析
Dec 20 Javascript
关于node-bindings无法在Electron中使用的解决办法
Dec 18 Javascript
vue.js中导出Excel表格的案例分析
Jun 11 Javascript
详解vue身份认证管理和租户管理
May 25 Vue.js
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可能遇到的问题“无法载入mysql扩展” 的解决方法
2007/04/16 PHP
PHP 中关于ord($str)&amp;gt;0x80的详细说明
2012/09/23 PHP
CodeIgniter中实现泛域名解析
2014/07/19 PHP
在Ajax中使用Flash实现跨域数据读取的实现方法
2010/12/02 Javascript
jquery 获取标签名(tagName)示例代码
2013/07/11 Javascript
IE 下Enter提交表单存在重复提交问题的解决方法
2014/05/04 Javascript
详解JavaScript基于面向对象之创建对象(1)
2015/12/10 Javascript
AngularJs定制样式插入到ueditor中的问题小结
2016/08/01 Javascript
JS填写银行卡号每隔4位数字加一个空格
2016/12/19 Javascript
webpack配置之后端渲染详解
2017/10/26 Javascript
React Native之prop-types进行属性确认详解
2017/12/19 Javascript
vue.js中created方法作用
2018/03/30 Javascript
微信小程序实现底部导航
2018/11/05 Javascript
vue 移动端注入骨架屏的配置方法
2019/06/25 Javascript
jQuery实现input[type=file]多图预览上传删除等功能
2019/08/02 jQuery
[39:18]完美世界DOTA2联赛PWL S3 Forest vs LBZS 第二场 12.17
2020/12/19 DOTA
Python开发SQLite3数据库相关操作详解【连接,查询,插入,更新,删除,关闭等】
2017/07/27 Python
新手常见6种的python报错及解决方法
2018/03/09 Python
Selenium(Python web测试工具)基本用法详解
2018/08/10 Python
Python简直是万能的,这5大主要用途你一定要知道!(推荐)
2019/04/03 Python
Django 后台获取文件列表 InMemoryUploadedFile的例子
2019/08/07 Python
python scipy卷积运算的实现方法
2019/09/16 Python
opencv 阈值分割的具体使用
2020/07/08 Python
详解Python直接赋值,深拷贝和浅拷贝
2020/07/09 Python
学python爬虫能做什么
2020/07/29 Python
详解Python中@staticmethod和@classmethod区别及使用示例代码
2020/12/14 Python
奥地利票务门户网站:oeticket.com
2019/12/31 全球购物
一些网络技术方面的面试题
2014/05/01 面试题
法务专员岗位职责
2014/01/02 职场文书
事业单位辞职信范文
2014/01/19 职场文书
公司运动会策划方案
2014/05/25 职场文书
出售房屋协议书范本
2014/10/06 职场文书
党的群众路线教育实践活动心得体会(乡镇)
2014/11/03 职场文书
一次MySQL启动导致的事故实战记录
2021/09/15 MySQL
MyBatis自定义SQL拦截器示例详解
2021/10/24 Java/Android
LyScript实现绕过反调试保护的示例详解
2022/08/14 Python