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 相关文章推荐
封装好的一个万能检测表单的方法
Jan 21 Javascript
jQuery实现购物车数字加减效果
Mar 14 Javascript
jquery实现可自动判断位置的弹出层效果代码
Oct 12 Javascript
jQuery实现验证年龄简单思路
Feb 24 Javascript
实例讲解Jquery中隐藏hide、显示show、切换toggle的用法
May 13 Javascript
Javascript之深入浅出prototype
Feb 06 Javascript
node.js程序作为服务并在windows下开机自启动(用forever)
Mar 29 Javascript
javascript显示动态时间的方法汇总
Jul 06 Javascript
Js 利用正则表达式和replace函数获取string中所有被匹配到的文本(推荐)
Oct 28 Javascript
JavaScript函数式编程(Functional Programming)组合函数(Composition)用法分析
May 22 Javascript
JavaScript Reflect Metadata实现详解
Dec 12 Javascript
原生js实现贪吃蛇游戏
Oct 26 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
攻克CakePHP系列一 连接MySQL数据库
2008/10/22 PHP
php at(@)符号的用法简介
2009/07/11 PHP
php expects parameter 1 to be resource, array given 错误
2011/03/23 PHP
PHP模板引擎Smarty自定义变量调解器用法
2016/04/11 PHP
jquery 图片上传按比例预览插件集合
2011/05/28 Javascript
载入jQuery库的最佳方法详细说明及实现代码
2012/12/28 Javascript
js弹出层永远居中实现思路及代码
2013/11/29 Javascript
用JavaScript实现类似于ListBox功能示例代码
2014/03/09 Javascript
模拟javascript中的sort排序(简单实例)
2016/08/17 Javascript
Node.js的基本知识简单汇总
2016/09/19 Javascript
js 判断登录界面的账号密码是否为空
2017/02/08 Javascript
angular2中Http请求原理与用法详解
2018/01/11 Javascript
通过JS运行机制的角度说说作用域
2019/03/12 Javascript
jquery实现购物车基本功能
2019/10/25 jQuery
Python登录注册验证功能实现
2018/06/18 Python
python删除字符串中指定字符的方法
2018/08/13 Python
python使用magic模块进行文件类型识别方法
2018/12/08 Python
用pycharm开发django项目示例代码
2019/06/13 Python
python使用yield压平嵌套字典的超简单方法
2019/11/02 Python
Python之指数与E记法的区别详解
2019/11/21 Python
关于Python turtle库使用时坐标的确定方法
2020/03/19 Python
利用Python实现Json序列化库的方法步骤
2020/09/09 Python
两种CSS3伪类选择器详细介绍
2013/12/24 HTML / CSS
一个基于canvas的移动端图片编辑器的实现
2020/10/28 HTML / CSS
照片礼物和装饰:MyPhoto
2019/11/02 全球购物
北京RT科技有限公司.net工程师面试题
2013/02/15 面试题
如何查找网页漏洞
2016/06/22 面试题
市场开发与营销专业求职信
2013/12/31 职场文书
《登鹳雀楼》教学反思
2014/04/09 职场文书
学期评语大全
2014/04/30 职场文书
团代会开幕词
2015/01/28 职场文书
三潭印月的导游词
2015/02/12 职场文书
暑期家教宣传单
2015/07/14 职场文书
关于环保的宣传稿
2015/07/23 职场文书
防溺水安全教育主题班会
2015/08/12 职场文书
python使用BeautifulSoup 解析HTML
2022/04/24 Python