基于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 数组运用实现代码
Apr 13 Javascript
Web前端设计模式  制作漂亮的弹出层
Oct 29 Javascript
JavaScript游戏之优化篇
Nov 08 Javascript
IE不支持getElementsByClassName最终完美解决方案
Dec 17 Javascript
JS实现图片横向滚动效果示例代码
Sep 04 Javascript
HTML5实现留言和回复页面样式
Jul 22 Javascript
jQuery实现的导航动画效果(附demo源码)
Apr 01 Javascript
js获取元素的外链样式的简单实现方法
Jun 06 Javascript
ES6新增数据结构WeakSet的用法详解
Aug 07 Javascript
详解webpack打包时排除其中一个css、js文件或单独打包一个css、js文件(两种方法)
Oct 26 Javascript
react-native滑动吸顶效果的实现过程
Jun 03 Javascript
vue监听用户输入和点击功能
Sep 27 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时间戳使用实例代码
2008/06/07 PHP
openPNE常用方法分享
2011/11/29 PHP
PHP获取php,mysql,apche的版本信息示例代码
2014/01/16 PHP
PHP、Nginx、Apache中禁止网页被iframe引用的方法
2020/10/01 PHP
PHP实现股票趋势图和柱形图
2015/02/07 PHP
PHP实现微信提现功能(微信商城)
2019/11/21 PHP
textarea中的手动换行处理的jquery代码
2011/02/26 Javascript
通过JS来判断页面控件是否获取焦点
2014/01/03 Javascript
Javascript字符串拼接小技巧(推荐)
2016/06/02 Javascript
jQuery实现鼠标经过购物车出现下拉框代码(推荐)
2016/07/21 Javascript
javascript表单控件实例讲解
2016/09/13 Javascript
AngularJS 表达式详解及实例代码
2016/09/14 Javascript
微信公众平台开发教程(六)获取个性二维码的实例
2016/12/02 Javascript
小程序开发实战:实现九宫格界面的导航的代码实现
2017/01/19 Javascript
微信小程序本作用域下调用全局JS详解及实例
2017/02/22 Javascript
微信小程序使用audio组件播放音乐功能示例【附源码下载】
2017/12/08 Javascript
AngularJS中ng-options实现下拉列表的数据绑定方法
2018/08/13 Javascript
vue3.0 CLI - 2.6 - 组件的复用入门教程
2018/09/14 Javascript
深入浅析javascript函数中with
2018/10/28 Javascript
vue实现div拖拽互换位置
2020/07/29 Javascript
jQuery创建折叠式菜单
2019/06/15 jQuery
微信小程序弹窗禁止页面滚动的实现代码
2020/12/30 Javascript
python实现批量改文件名称的方法
2015/05/25 Python
Python爬虫实现网页信息抓取功能示例【URL与正则模块】
2017/05/18 Python
Python基于动态规划算法解决01背包问题实例
2017/12/06 Python
TensorFlow模型保存和提取的方法
2018/03/08 Python
python把数组中的数字每行打印3个并保存在文档中的方法
2018/07/17 Python
通过python将大量文件按修改时间分类的方法
2018/10/17 Python
在Python中通过getattr获取对象引用的方法
2019/01/21 Python
python使用梯度下降算法实现一个多线性回归
2020/03/24 Python
利用CSS3的border-radius绘制太极及爱心图案示例
2016/05/17 HTML / CSS
中国宠物用品商城:E宠商城
2016/08/27 全球购物
2014年机关工会工作总结
2014/12/19 职场文书
公司仓管员岗位职责
2015/04/01 职场文书
python glom模块的使用简介
2021/04/13 Python
JavaScript 反射学习技巧
2021/10/16 Javascript