IT培训网更多 收回

IT培训
关注我们
微信公众号 回复"大礼包"享福利 学习交流群 分享IT知识
|

IT在线学习更多 收回

热门课程 更多 >
  • Java开发
  • Web前端
  • Python+人工智能
  • 全链路UI/UE设计
  • VR/AR游戏开发
  • 大数据
  • 室内设计
  • PMP认证
  • 互联网营销
  • 全域电商运营
  • 新媒体与短视频运营
  • 软件测试
  • Linux云计算
  • Office
  • 计算机二级
  • 计算机软考
OAO训练营
不离岗 不离校 学门IT技术
优学VIP
16大类IT课程 提升职场竞争力
关注我们
下载【IT优学】 缓存视频随时随地学 微信扫码关注 回复“大礼包”享福利
| 初高中软件培训| 中公企商培训| 中公联合办学| 优校邦| 中公PMP| 中公软考| 计算机二级培训| 趣码AI
登录 | 注册
400-650-7353

精品课程

您所在的位置:首页 > IT干货资料 > web前端 > 【Web前端基础知识】如何实现网页中常见的切换效果

【Web前端基础知识】如何实现网页中常见的切换效果

  • 发布: Web前端培训
  • 来源:Web前端干货资料
  • 2020-11-25 11:26:42
  • 阅读()
  • 分享
  • 手机端入口
  • 活动 5天IT课程 申请试学
  • 活动 申请免费基地参观
  • 活动 申请中公购书补助

在页面中tab切换非常的常见,我们先来看下网站中tab切换的实际案例。

我们来做一个简单的tab切换的案例吧~学会了下面的案例,只要通过更改样式,就可以实现上面实例中的样子啦~

一、需求:

1.三个标题对应三个内容区域。

2.默认“标题1“文字颜色是红色,其他标题文字颜色为黑色。

3.“标题1“对应的”内容1“展示出来,其他两个内容区域隐藏。

4.点击“标题几“: ”标题几“的文字颜色是红色,其他标题颜色为黑色,对应的”内容几“展示出来,其他内容区域隐藏。

如图所示:

二、样式和结构:

我们先写结构和样式部分:

  1. <style> 
  2. .on{ 
  3.        /* 让class名是on的元素,文字变成红色 */ 
  4.        color: red; 
  5.    } 
  6.    #con div{ 
  7.         width: 200px; 
  8.         height: 200px; 
  9.         border:10px solid orange; 
  10.         /* 让内容区域都隐藏起来 */ 
  11.          display: none; 
  12.     } 
  13.     #con .active{ 
  14.          /* 让class名是active的元素显示出来 */ 
  15.          display: block; 
  16.     } 
  17. </style> 
  18. <body> 
  19.     <div id="btn"> 
  20.         <button class="on">标题1</button> 
  21.         <button>标题2</button> 
  22.         <button>标题3</button> 
  23.     </div> 
  24.     <div id="con"> 
  25.         <div class="active">内容1</div> 
  26.         <div>内容2</div> 
  27.         <div>内容3</div> 
  28.     </div> 
  29. </body> 

三、按钮部分分析:

1.点击每个按钮之后所干的事是一样的,所以我们用for循环写。

2.点击按钮之后,我们先去掉所有按钮的class名,这样所有按钮里的文字颜色就都是默认的黑色。

3.然后我们给当前点击的这个按钮加上class名是on就可以了,上面样式里面我们已经定义好了class名是on的元素文字颜色是红色。

代码如下:

  1. for(var i = 0; i < obtn.length; i++){ 
  2. // 点击按钮 
  3.    obtn[i].onclick = function(){ 
  4.     for(var j = 0; j<obtn.length; j++){ 
  5.         // 去掉所有按钮的class名。 
  6.          obtn[j].className = ""
  7.       } 
  8.          // 给当前点击的这个按钮加上class名是on 
  9.          this.className = "on"

四、按钮当前的索引:

我们需要定义按钮当前的索引,点击第几个按钮就把对应索引的第几个内容展示出来。

代码如下:

  1. obtn[i].index = i; 

当i=0时,btns[0].index就是0;

当i=1时,btns[0].index就是1;

当i=0时,btns[2].index就是2。

五、展示对应索引的内容区域:

1. 我们需要先把所有内容区域都隐藏,所以我们使用for循环来写。

2. 把所有内容区域div的class名去掉就可以了。

3. 把当前索引对应的内容区域展示出来,只需要把class名active加上就可了,active的样式我们在上面已经写过了。

代码如下:

  1. //隐藏所有内容区域。 
  2. for(var j = 0; j<ocon.length; j++){ 
  3. ocon[j].className = ''
  4. //当前索引对应的内容展示出来。 
  5. ocon[this.index].className = 'active'

六、代码优化:

我们发现按钮的长度(obtn.length)和内容的长度(ocon.length)是一样的,上面我们是用两个for循环来写,其实我们可以把代码优化下,改成用一个for循环就可以了。代码如下:

  1. for(var j = 0; j<obtn.length; j++){ 
  2. // 去掉所有按钮的class名。 
  3. obtn[j].className = ""
  4.    //隐藏所有内容区域。 
  5.    ocon[j].className = ''

七、完整代码如下:

  1. <!DOCTYPE html> 
  2. <html> 
  3. <head> 
  4.     <meta charset="UTF-8"> 
  5.     <title>tab切换</title> 
  6.     <style> 
  7.         .on{ 
  8.             /* 让class名是on的元素,文字变成红色 */ 
  9.             color: red; 
  10.         } 
  11.         #con div{ 
  12.             width: 200px; 
  13.             height: 200px; 
  14.             border:10px solid orange; 
  15.             /* 让内容区域都隐藏起来 */ 
  16.             display: none; 
  17.         } 
  18.         #con .active{ 
  19.             /* 让class名是active的元素显示出来 */ 
  20.             display: block; 
  21.         } 
  22.     </style> 
  23. </head> 
  24. <body> 
  25.     <div id="btn"> 
  26.         <button class="on">标题1</button> 
  27.         <button>标题2</button> 
  28.         <button>标题3</button> 
  29.     </div> 
  30.     <div id="con"> 
  31.         <div class="active">内容1</div> 
  32.         <div>内容2</div> 
  33.         <div>内容3</div> 
  34.     </div> 
  35.     <script> 
  36.         //获取到id名是btn的元素。 
  37.         var btn = document.getElementById("btn"); 
  38.         //获取到btn里面标签名是button的元素,也就是获取到3个按钮。 
  39.         var obtn = btn.getElementsByTagName("button"); 
  40.         //获取到id名是con的元素。 
  41.         var con = document.getElementById("con"); 
  42.         //获取到con里面标签名是div的元素,也就是获取到3个内容。 
  43.         var ocon = con.getElementsByTagName("div"); 
  44.          
  45.          
  46.         for(var i = 0; i < obtn.length; i++){ 
  47.             //给每个按钮定义了一个index属性,这个index是属于obtn[i]的属性和方法。 
  48.             obtn[i].index = i; 
  49.             // 点击按钮 
  50.             obtn[i].onclick = function(){ 
  51.                 for(var j = 0; j<obtn.length; j++){ 
  52.                     // 去掉所有按钮的class名。 
  53.                     obtn[j].className = ""
  54.                     //隐藏所有内容区域。 
  55.                     ocon[j].className = ''
  56.                 } 
  57.                 // 给当前点击的这个按钮加上class名是on 
  58.                 this.className = "on"
  59.                  
  60.                 //当前索引对应的内容展示出来。 
  61.                 ocon[this.index].className = 'active'
  62.             } 
  63.              
  64.         } 
  65.     </script> 
  66. </body> 
  67. </html> 

效果图:

学习疑问申请解答
您的姓名
您的电话
意向课程
 

中公优就业

IT小助手

扫描上方二维码添加好友,请备注:599,享学习福利。

>>本文地址:
注:本站稿件未经许可不得转载,转载请保留出处及源文件地址。

推荐阅读

优就业:ujiuye

关注中公优就业官方微信

  • 关注微信回复关键词“大礼包”,享学习福利
QQ交流群
在线疑问解答
(加群备注“网站”)
IT培训交流群 加入群聊 +
软件测试 加入群聊 +
全链路UI/UE设计 加入群聊 +
Python+人工智能 加入群聊 +
互联网营销 加入群聊 +
Java开发 加入群聊 +
PHP开发 加入群聊 +
VR/AR游戏开发 加入群聊 +
大前端 加入群聊 +
大数据 加入群聊 +
Linux云计算 加入群聊 +
优就业官方微信
扫码回复关键词“大礼包”
享学习福利

测一测
你适合学哪门IT技术?

1 您的年龄

2 您的学历

3 您更想做哪个方向的工作?

获取测试结果
 
课程资料、活动优惠 领取通道
 
 
  • 申请试听
  • 干货资料
  • 网课咨询
  • 学习交流群
  • 返回顶部