专栏首页wfacebossjs实现选项卡

js实现选项卡

(一)思路:

选项卡就是点击按钮切换到相应内容,其实就是点击按钮把内容通过display(block none)来实现切换的。

1、首先获取元素。

2、for循环历遍按钮元素添加onclick 或者 onmousemove事件。

3、因为点击当前按钮时会以高亮状态显示,所以要再通过for循环历遍把所有的按钮样式设置为空和把所有DIV的display设置为none。

4、把当前按钮添加样式,把当前DIV显示出来,display设置为block。

注:给多个元素添加多个事件要用for循环历遍。如选项卡是点击切换,当前按钮高度,点击和按钮高亮就是2个事件,所以要用2个for循环历遍。

HTML代码:

<div id="box"> <input type="button" value="1" /> <input type="button" value="2" /> <input type="button" value="3" /> <input type="button" value="4" />

<div>1</div> <div>2</div> <div>3</div> <div>4</div> </div>

CSS代码:

Javascript代码:

<script> window.onload=function()

{ var box=document.getElementById('box'); var input=box.getElementsByTagName('input'); var div=box..getElementsByTagName('div');

for(var i=0;i<input.length;i++)

{ //循环历遍onclick事件 input[i].index=i; //input[0].index=0 index是自定义属性 input[i].onclick=function(){ for(var i=0;i<input.length;i++)

{ //循环历遍去掉button样式和把div隐藏 input[i].className=''; div[i].style.display='none'; }; this.className='active'; //当前按钮添加样式 div[this.index].style.display='block'; //div显示 this.index是当前div 即div[0]之类的 }; }; }; </script>

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

我来说两句

0 条评论
登录 后参与评论

相关文章

  • Scrapy爬虫(8)scrapy-splash的入门

      在前面的博客中,我们已经见识到了Scrapy的强大之处。但是,Scrapy也有其不足之处,即Scrapy没有JS engine, 因此它无法爬取JavaSc...

    拓荒者
  • 解读mpvue官方文档的Class 与 Style 绑定及不支持语法

    在vue.js项目转化为小程序时,把原来页面的代码直接拷贝过去,发现布局改变很多,很多已经设置的标签的css样式并没有显示出来,查看官方文档,得知原来vue.j...

    honey缘木鱼
  • style样式:json对象和字符串相互转化

    在mpvue项目中,由于:class和:style样式不能是对象的形式,必须转化为字符串,就需要下面的转化方法。 一.json对象转字符串

    honey缘木鱼
  • nohup和&后台运行,进程查看及终止 原

      无论是否将 nohup 命令的输出重定向到终端,输出都将附加到当前目录的 nohup.out 文件中。

    拓荒者
  • Nginx 防御CC攻击的两种方法 原

    CC攻击可以归为DDoS攻击的一种。他们之间都原理都是一样的,即发送大量的请求数据来导致服务器拒绝服务,是一种连接攻击。CC攻击又可分为代理CC攻击,和肉鸡CC...

    拓荒者
  • 基于element-tree-table树型表格点击节点请求数据展开树型表格

    treeTable: https://github.com/ProsperLee/element-tree-grid

    ProsperLee
  • navigateTo:fail page "pages/goodsDetails/javascript:void(0);" is not found

    在vue.js项目转化到mpvue的小程序项目的过程中,执行事件时,报了如下图所示的错误:

    honey缘木鱼
  • 如何在.NET应用中访问以太坊智能合约【Nethereum】

    Nethereum基本上是目前唯一可用的.NET平台下的web3.js移植包。在这个教程中,我们将首先编写并部署一个简单的智能合约,然后创建一个简单的.NET应...

    用户1408045
  • ASP.NET Core 2.2 十九. 你扔过来个json,我怎么接

      前文说道了Action的激活,这里有个关键的操作就是Action参数的映射与模型绑定,这里即涉及到简单的string、int等类型,也包含Json等复杂类型...

    FlyLolo
  • KOA中间件的基本运作原理

    在中间件系统的实现上,KOA中间件通过async/await来在不同中间件之间交换控制权,工作机制和栈结构非常相似,建议结合《express中间件系统的基本实现...

    大史不说话

扫码关注云+社区

领取腾讯云代金券