js编写选项卡效果


Posted in Javascript onMay 23, 2017

本文实例为大家分享了js选项卡效果的具体代码,供大家参考,具体内容如下

<!DOCTYPE html>
<html>
 <head>
  <meta charset="utf-8" />
  <title></title>
  <style>
   *{
    margin:0;
    padding:0;
   }
   .box{

    margin:50px;
   }
   .box div{
    display:none;
    width: 200px;
    height: 200px;
    border:1px solid black;
   }
   .onclick{
    background:red;
   }
   input{
    border:1px solid #666;
    padding:2px;
   }
  </style>
 </head>
 <body>
  <div class='box'>
   <input type="button" value='按钮1' class='onclick'/>
   <input type="button" value='按钮2' />
   <input type="button" value='按钮3' />
   <div style="display:block">1</div>
   <div>2</div>
   <div>3</div>
  </div>
 </body>
 <script>
  var ipt=document.getElementsByTagName('input');
  //获取所有的按钮标签
  var oDiv=document.getElementsByClassName('box')[0];
  //获取box标签
  var aDiv=oDiv.getElementsByTagName('div');
  //获取box下面的所有div标签
  for(var i=0;i<ipt.length;i++){
   //使用for循环 遍历所有的input按钮
   ipt[i].index=i;
   //定义索引为i;
   ipt[i].onclick=function(){
    //点击事件
    for(var j=0;j<ipt.length;j++){
     //清除所有的样式
     aDiv[j].style.display='none';

     ipt[j].className='';

    }
    //设置adiv的样式和input的背景样式
    aDiv[this.index].style.display='block';

    ipt[this.index].className='onclick';
   }
  }
 </script>
</html>

补充JQ的做法:

$(function(){
  $('.box').find('input').click(function(){
  $('.box').find('input').attr('class','');
  $(this).attr('class','onclick');
  $('.box').find('div').css('display','none');
  $('.box').find('div').eq($(this).index()).css('display','block');

  });
 });

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
prototype Element学习笔记(Element篇三)
Oct 26 Javascript
基于jQuery的固定表格头部的代码(IE6,7,8测试通过)
May 18 Javascript
Internet Explorer 11 浏览器介绍:别叫我IE
Sep 28 Javascript
node.js中的console.dir方法使用说明
Dec 10 Javascript
JavaScript中的Math.LOG2E属性使用详解
Jun 14 Javascript
javascript实现动态统计图开发实例
Nov 21 Javascript
JS实现获取剪贴板内容的方法
Jun 21 Javascript
AngularJS基础 ng-mouseenter 指令示例代码
Aug 02 Javascript
Javascript DOM事件操作小结(监听鼠标点击、释放,悬停、离开等)
Jan 20 Javascript
Bootstrap超大屏幕的实现代码
Mar 22 Javascript
cocos2dx+lua实现橡皮擦功能
Dec 20 Javascript
微信小程序wepy框架学习和使用心得详解
May 24 Javascript
jQuery日期范围选择器附源码下载
May 23 #jQuery
详解JavaScript数组过滤相同元素的5种方法
May 23 #Javascript
强大的 Angular 表单验证功能详细介绍
May 23 #Javascript
微信小程序 侧滑删除(左滑删除)
May 23 #Javascript
最常用的jQuery表单验证(简单)
May 23 #jQuery
jquery实现简单实用的轮播器
May 23 #jQuery
vue.js 左侧二级菜单显示与隐藏切换的实例代码
May 23 #Javascript
You might like
关于PHP中Object对象的笔记分享
2011/06/28 PHP
php 批量替换程序的具体实现代码
2013/10/04 PHP
PHP实现读取文件夹及批量重命名文件操作示例
2019/04/15 PHP
PHP正则之正向预查与反向预查讲解与实例
2020/04/06 PHP
Prototype1.6 JS 官方下载地址
2007/11/30 Javascript
javascript 数组排序函数
2009/08/20 Javascript
JS getAttribute和setAttribute(取得和设置属性)的使用介绍
2013/07/10 Javascript
图片Slider 带左右按钮的js示例
2013/08/30 Javascript
JS获取随机数函数可自定义最小值最大值
2014/05/08 Javascript
node.js中的fs.readlink方法使用说明
2014/12/17 Javascript
原生js实现移动开发轮播图、相册滑动特效
2015/04/17 Javascript
js实现图片点击左右轮播
2015/07/08 Javascript
Node.js中JavaScript操作MySQL的常用方法整理
2016/03/01 Javascript
jQuery学习心得总结(必看篇)
2016/06/10 Javascript
JavaScript随机打乱数组顺序之随机洗牌算法
2016/08/02 Javascript
清除js缓存的多种方法总结
2016/12/09 Javascript
微信小程序登录按钮遮罩浮层效果的实现方法
2018/12/16 Javascript
JavaScript如何获取一个元素的样式信息
2019/07/29 Javascript
微信小程序云函数使用mysql数据库过程详解
2019/08/07 Javascript
bootstrap+spring boot实现面包屑导航功能(前端代码)
2019/10/09 Javascript
VUE 实现动态给对象增加属性,并触发视图更新操作示例
2019/11/29 Javascript
[03:09]DOTA2亚洲邀请赛 LGD战队出场宣传片
2015/02/07 DOTA
详解python3中socket套接字的编码问题解决
2017/07/01 Python
python之pandas用法大全
2018/03/13 Python
Python lambda表达式用法实例分析
2018/12/25 Python
在Python中通过getattr获取对象引用的方法
2019/01/21 Python
Django中使用Json返回数据的实现方法
2020/06/03 Python
Python 字典一个键对应多个值的方法
2020/09/29 Python
Haggar官网:美国男装品牌
2020/02/16 全球购物
国际贸易专业个人求职信范文分享
2013/12/14 职场文书
厂区绿化方案
2014/05/08 职场文书
2014年妇产科工作总结
2014/12/08 职场文书
会计工作能力自我评价
2015/03/05 职场文书
德能勤绩工作总结
2015/08/11 职场文书
社区服务理念口号
2015/12/25 职场文书
导游词之无锡唐城
2019/12/12 职场文书