400-650-7353

精品课程

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

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

在页面中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> 

效果图:

课程好礼申请领取
您的姓名
您的电话
意向课程
 

中公优就业

官方QQ

扫描上方二维码或点击一键加群,免费领取价值599元网课,加群暗号:599。 一键加群

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

推荐阅读

优就业:ujiuye

关注中公优就业官方微信

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

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

1 您的年龄

2 您的学历

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

获取测试结果
 
课程资料、活动优惠 领取通道
 
 
网站地图 58彩票网平台登录 快乐彩票网开户 58彩票网平台登录
太阳城美女荷官 138申博亚洲 老虎机游戏下载 申博太阳城网站
ag亚游娱乐平台 注册送现金博彩网 申博太阳城官方下载登入 澳门新金沙官方网址登入
快乐彩票app下载 五星彩票网注册 快乐彩票网站 快乐彩票平台是否正规
五星彩票网官方网 五星彩票网官方网 五星彩票网网站 58彩票网是合法的吗
XSB878.COM 8ZJS.COM 115sunbet.com 8ZJKS.COM 666TGP.COM
761sun.com 866TGP.COM 538PT.COM bq138.com 388TGP.COM
788cw.com 8NGS.COM XSB4444.COM 537SUN.COM 657SUN.COM
S618E.COM 66sbib.com 444TGP.COM 1112127.COM 697SUN.COM