• 400-650-7353

    精品课程

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

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

    • 发布: Web前端培训
    • 来源:Web前端干货资料
    • 2020-11-25 11:26:42
    • 阅读()
    • 分享
    • 手机端入口

    在页面中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 您更想做哪个方向的工作?

    获取测试结果
     
    课程资料、活动优惠 领取通道
     
     
    韩国毛茸茸的丰满妇女,亚洲国内自拍愉拍,高清性色生活片97,亚洲日本成本人观看 网站地图