精华内容
下载资源
问答
  • 主要介绍了javascript实现tab切换特效,实现的方法很简单,特别适合初学者学习javascript实现tab切换特效,tab切换再也不是问题,需要的朋友可以参考下
  • JavaScript实现Tab切换

    2019-09-23 21:09:59
    在网页开发中,常常会遇见很多Tab切换Tab切换增加网页浏览的舒适性,对于开发人员特别常见,本文使用JS实现tab切换效果,仅对学习中遇到的知识点做一个总结。 效果图如下: 实现思路: 1.首先使用HTML和CSS...

    在网页开发中,常常会遇见很多Tab切换,Tab切换增加网页浏览的舒适性,对于开发人员特别常见,本文使用JS实现tab切换效果,仅对学习中遇到的知识点做一个总结。

    效果图如下:

       

    实现思路:

    1.首先使用HTML和CSS构建静态网页如上,标题使用ul-li标签,有浮动,主体使用四个大小一样的盒子,不添加JS时候,盒子竖直排列(很丑很丑)

    2.添加JS代码

      2.1 首先实现标题的Tab效果

        2.1.1获取所有的li元素,注册鼠标进入事件,在鼠标进入事件中,清除所有的li元素样式,然后给当前li元素添加样式

        2.1.2在注册事件前,给所有的li元素通过setAttribute()方法给li挨个添加index属性,记录标签的序号,方便和主体div对应

      2.2 实现所有的主体模块Tab效果

        2.2.1 获取所有的主体DIV,与标签进行绑定,通过getAttribute()方法获得当前标签的索引,通过该索引得到DIV集合中与标签对应的div

    代码如下:

      1 <!DOCTYPE html>
      2 <html>
      3 <head lang="en">
      4     <meta charset="UTF-8">
      5     <title></title>
      6     <style>
      7         *{
      8             padding: 0px;
      9             margin: 0px;
     10         }
     11         /* 总体大盒子 */
     12         #box{
     13             width: 400px;
     14             height: 300px;
     15             border: 1px solid gray;
     16             margin: 100px auto auto;
     17         }
     18         /* 大盒子中头部小盒子ul */
     19         #hd{
     20             height: 45px;
     21         }
     22         /* 小盒子ul中li标签 */
     23         #hd li{
     24             height: 45px;
     25             display: inline-block;
     26             line-height: 45px;
     27             width: 98px;
     28             text-align: center;
     29             border: 1px solid gray;
     30             float: left;
     31             list-style: none;
     32         }
     33         /* 大盒子中主体小盒子 */
     34         #bd{
     35             height: 255px;
     36         }
     37         /* 各个小版块 */
     38         #bd div{
     39             height: 100%;
     40             display: none;
     41             
     42         }
     43         
     44         #bd,#hd .current{
     45             display: block;
     46             background-color: #ECEEF1;
     47         }
     48     </style>
     49 
     50 </head>
     51 <body>
     52     <div id="box">
     53         <ul id="hd">
     54             <li class="current">体育</li>
     55             <li>娱乐</li>
     56             <li>新闻</li>
     57             <li>综合</li>
     58         </ul>
     59         
     60         <div id="bd">
     61             <div class="current" style="display: block;">这是体育频道</div>
     62             <div>这是娱乐频道</div>
     63             <div>这是新闻频道</div>
     64             <div>这是综合频道</div>
     65         </div>
     66     </div>
     67     <!-- 插入JS代码 -->
     68     <script>
     69 //         思路:
     70 //             1.实现标题小模块的Tab切换
     71 //                 1.1 首先给所有的标题小模块清除样式
     72 //                 1.2 给鼠标移入的标题小模块添加样式
     73 //            2.实现主体模块和标题小模块之间的绑定
     74 //                2.1 给标题小模块添加一个属性index,用以记录标题小模块的索引
     75 //                2.2 通过getAttribute()方法得到索引,从而对应主体模块的内容
     76             var hd=document.getElementById('hd');
     77             //获得所有的标题小模块
     78             var lis=hd.getElementsByTagName('li');
     79             //获得所有的主体模块
     80             var bd=document.getElementById('bd');
     81             var divs=bd.getElementsByTagName('div');
     82             //给所有的li注册事件
     83             for(var i=0;i<lis.length;i++){
     84                 var li=lis[i];
     85                 li.setAttribute('index',i);
     86                 li.οnmοuseοver=function(){
     87                     //每次鼠标移入的时候,清除所有的小模块样式,只给当前的小模块加入样式
     88                     for(var i=0;i<lis.length;i++){
     89                         lis[i].className="";//所有模块样式清除
     90                         this.className="current";
     91                     //鼠标移入的时候,给所有的主体模块清除样式,然后给对应当前小模块的主体模块添加样式
     92                         divs[i].className="";
     93                         divs[i].style.display="none";
     94                         
     95                         //对当前的模块的进行操作
     96                         var index=parseInt(this.getAttribute('index'));
     97                         divs[index].className="current";
     98                         divs[index].style.display="block";
     99                     }
    100                 }
    101             }
    102     </script>
    103 </body>
    104 </html>

     

    转载于:https://www.cnblogs.com/WangYujie1994/p/10239068.html

    展开全文
  • 原生js实现tab切换 与 jq实现tab切换 原生js实现 **css部分** <style> *{ margin: 0; padding: 0; } .warp{ width: 100%; background-color: cyan; display: flex; } .top{

    原生js实现tab切换 与 jq实现tab切换

    原生js实现

    **css部分** 
    <style>
            *{
                margin: 0;
                padding: 0;
            }
            .warp{
                width: 100%;
                background-color: cyan;
                display: flex;
            }
            .top{
                width: 80vh;
                height: 50px;
                margin-left: 350px;
                display: flex;
            }
            .top div{   
                background-color: cadetblue;
                width: 100vh;
                height:50px;
                line-height: 50px;
                text-align: center;
                border-right: solid black 1px;
                flex-direction: row;
            }
            h1{
                text-align: center;
            }
            .top .active{
                display: block;
                background-color: yellowgreen;
                color: white;
            }
            .bottom{
                flex: 1;
                /* background-color: palegoldenrod; */
    
            }
            .bottom>div{
                display: none;
                text-align: center;
            }
            .bottom .show{
                display: block;
            }
            table{
                width: 100vh;
                border-collapse: collapse;
                cursor: pointer;
                margin: 0 auto;
            }
            table td{
                text-align: center;
            }
        </style>
        <div class="wrap">
            <h1>垃圾分类</h1>
           <div class="top">
                   <div  class="active">生活垃圾分类</div>
                   <div>可回收物</div>
                   <div>厨余垃圾</div>
                   <div>其他垃圾</div>
                   <div>有害垃圾</div>
            </div> 
           <div class="bottom">
                        <div class="show">
                            <h2>欢迎来到生活垃圾分类首页</h2>
                        <label>垃圾名称:</label>
                        <input type="text" name="" id="user"/>
                        <br>
                            <div class="add">
                                <button id="add1">添加到可回收物</button>
                                <button id="add2">添加到厨余垃圾</button>
                                <button id="add3">添加到其他垃圾</button>
                                <button id="add4">添加到有害垃圾</button>
                            </div>
                        </div>
         </div>
    
    js部分
     var divs=document.querySelectorAll(".top>div")
            var divs1=document.querySelectorAll(".bottom>div")
            console.log(divs,divs1);
            for( var i=0; i<divs.length; i++){
                divs[i].index = i;
                divs[i].onclick =function(){
                    for(var j=0; j<divs1.length; j++){
                        divs[j].className = "";
                        divs1[j].className ="";
                    }
                    this.className = "active";
                    divs1[this.index].className = "show";
                }
            }
    

    jq实现

    css部分
     <style>
            *{
                margin: 0;
                padding: 0;
            }
            .warp{
               width: 100%;
            }
            ul li{
                list-style: none;
            }
            .top{
                width: 300px;
                height: 30px;
                display: flex;
            }
            .top li{
                flex-direction: row;
                width: 200px;
                height: 30px;
                line-height: 30px;
                border: solid 1px  black;
                text-align: center;
            }
            .top .active{
                background-color: paleturquoise;
                color: white;
            }
            .buttom>div{
                width: 300px;
                height: 200px;
                border: solid 1px  black;
                display: none;
            }
            .buttom .show{
                display: block;
            }
        </style>
    
    jq部分
     <script>
             $(".top>li").on("click",function(){
                 var index= $(this).index();
                 $(this).addClass("active").siblings().removeClass("active");
                 $(".buttom>div").eq(index).addClass("show").siblings().removeClass("show");
             })
     </script>
    

    总而言之jq的写法相对原生js来说简化了好多! 仅供参考!

    展开全文
  • JS实现tab切换

    2020-01-13 17:46:32
    大家会不会对tab切换有一点好奇呢,今天我们就来看看js是怎么实现tab切换的吧。 废话不多说,先上图: css <style> * { margin: 0; padding: 0; list-style: none; } /* 整个tab切换的div样式 */ #tab_...

    前言

    大家会不会对tab切换有一点好奇呢,今天我们就来看看js是怎么实现tab切换的吧。

    废话不多说,先上图:
    在这里插入图片描述
    在这里插入图片描述

    css

    <style>
    * {
    	margin: 0;
    	padding: 0;
    	list-style: none;
    }
    /* 整个tab切换的div样式 */
    #tab_box {
    	width: 600px;
    	height: 300px;
    	margin: 50px auto;
    	border-left: 1px solid;
    	border-top: 1px solid;
    	border-right: 1px solid;
    	border-bottom: 1px solid;
    }
    /* tab标签的默认样式 */
    .tab {
    	float: left;
    	width: 199px;
    	height: 49px;
    	line-height: 49px;
    	text-align: center;
    	border-right: 1px solid;
    	border-bottom: 1px solid;
    	cursor: pointer; /* 改变鼠标光标的默认样式 */
    }
    /* tab标签的点击样式 */
    .tab.active {
    	background: orange;
    }
    .tab:last-of-type {
    	width: 200px;
    	border-right: none;
    }
    .tab_content {
    	float: left;
    	width: 600px;
    	height: 250px;
    }
    /* tab标签对应的内容的div的样式 */
    .tab_main {
    	line-height: 250px;
    	text-align: center;
    	font-size: 40px;
    	font-weight: bold;
    	background: pink;
    	display: none;
    }
    /* 默认显示第一个 */
    .tab_main:first-of-type {
    	display: block;
    }
    </style>
    

    body

    <div id="tab_box">
    	<div>
    		<!-- 默认点击第一个tab标签 -->
    		<div class="tab active">选项一</div>
    		<div class="tab">选项二</div>
    		<div class="tab">选项三</div>
    	</div>
    	<div class="tab_content">
    		<div class="tab_main">选项一选项一</div>
    		<div class="tab_main">选项二选项二</div>
    		<div class="tab_main">选项三选项三</div>
    	</div>
    </div>
    

    js

    <script>
      // 获取到所有的tab标签
      var aTab = document.querySelectorAll('.tab');
      // 获取到所有与tab标签对应显示的内容div
      var aMain = document.querySelectorAll('.tab_main');
    
      // 循环所有的tab标签
      for(var i=0;i<aTab.length;i++){
        // 给每个tab标签加一个自定义属性index,后面会用到
        aTab[i].index = i;
        // 给每个tab标签绑定点击事件
        aTab[i].onclick = function () {
          // 在点击时再次循环所有的tab标签
          for(var s=0;s<aTab.length;s++){
            // 初始化tab标签的className
            aTab[s].className = 'tab'
            // 隐藏所有的内容div
            aMain[s].style.display = 'none'
          }
          // 改变当前的tab标签的className, this代表当前
          this.className = 'tab active';
          // 让当前点击的tab的与之对应的内容div展示出来  this.index 即为当前点击的tab下标
          aMain[this.index].style.display = 'block'
        }
      }
    </script>
    

    尾语

    以上就是我写的tab切换了,大家可以参考一下,有什么不足或者是问题请大家一定要给我指出来哦。您的支持就是我最大的动力,谢谢大家的阅读,如果觉着还行的话可以点个赞哦,谢谢。

    展开全文
  • 主要介绍了基于javascript实现tab切换特效的相关资料,具有一定的参考价值,需要的朋友可以参考下
  • js实现tab切换

    2018-09-30 09:19:03
    很不错的切换效果哦,希望对大家有所帮助,同时也感谢大家的支持
  • JavaScript实现tab切换

    2020-01-08 15:39:17
    JavaScript实现table切换 实现效果 代码如下 <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>tab点击切换</title> <style type="text/css"> *...

    JavaScript实现tab切换

    实现效果

    在这里插入图片描述

    代码如下

    <!DOCTYPE html>
    <html>
    	<head>
    		<meta charset="utf-8">
    		<title>tab点击切换</title>
    		<style type="text/css">
    			*{
    				margin: 0;
    				padding: 0;
    				list-style: none;
    			}
    			ul{
    				display: flex;
    				justify-content: space-around;
    				text-align: center;
    				font-size: 20px;
    				height: 60px;
    				line-height: 60px;
    			}
    			li{
    				flex: 1;
    			}
    			.active{
    				border-bottom: 2px solid #FF0000;
    			}
    			.conter{
    				display: none;
    			}
    			.conter.show{
    				display: inline;
    			}
    		</style>
    	</head>
    	<body>
    		<div id="box">
    			<ul>
    				<li class="active">目录1</li>
    				<li>目录2</li>
    				<li>目录3</li>
    				<li>目录4</li>
    			</ul>
    			<div class="conter show">内容1</div>
    			<div class="conter">内容2</div>
    			<div class="conter">内容3</div>
    			<div class="conter">内容4</div>
    		</div>
    		<script type="text/javascript">
    			window.onload = function(){
    				//获取元素
    				var oli = document.getElementsByTagName("li");
    				var odiv = document.getElementsByClassName("conter");
    				for(var i = 0;i < oli.length;i ++){
    					//保存i
    					oli[i].index = i;
    					//对应标题点击事件
    					oli[i].onclick = function(){
    						//移除class
    						for(var j = 0;j < oli.length;j ++){
    							oli[j].classList.remove("active");
    							odiv[j].classList.remove("show");
    						}
    						//点击选中添加class,改变对应样式
    						oli[this.index].classList.add("active");
    						odiv[this.index].classList.add("show");
    					}
    				}
    			}
    		</script>
    	</body>
    </html>
    
    

    简单的代码实现table切换,如有不足,请评论告知!谢谢!

    展开全文
  • CSSJS实现Tab切换 效果图 思路纯CSS实现Tab切换效果图思路ul li显示tab列表 li里面嵌套子div 显示详情 子div采用绝对布局 (让所有的子div都重叠在一个地方) 然后全部隐藏 在li的hover 时使其显示代码:<!DOCTYPE...
  • 主要介绍了javascript实现tab切换的两个实例,是对之前方法原理的进一步延伸,需要深入了解的同学可以参考一下
  • 主要介绍了javascript实现tab切换的四种方法,并且对每个方法进行了评价,感兴趣的小伙伴们可以参考一下
  • Vue.js实现tab切换效果

    2020-10-16 15:56:59
    主要为大家详细介绍了Vue.js实现tab切换效果,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
  • JavaScript实现Tab切换

    千次阅读 2017-08-03 00:33:16
    JavaScript实现Tab切换】 使用类名实现最简单Tab切换 完成函数封装版Tab切换 this的下标获取实现Tab切换 自定义属性版Tab切换 ...
  • Javascript实现Tab切换

    2015-07-08 15:00:16
    javascript实现Tab标签之间切换...--function:用javascript实现几个Tab标签间的切换。 -- created by:少数派力量_Mole --date:7/08/15 --> ul {overflow:hidden; zoom:1; list-style-type:none; cursor:poin
  • 主要介绍了js实现tab标签切换效果,功能非常简单,实现了点击切换的效果,推荐给大家,有需要的小伙伴可以参考下。
  • js实现tab切换效果

    2020-10-20 09:56:56
    本文主要分享了js封装一个tab切换效果的示例代码,具有很好的参考价值,下面跟着小编一起来看下吧
  • 主要介绍了js实现TAB切换对应不同颜色的代码,涉及javascript页面元素的遍历及样式的动态操作技巧,具有一定参考借鉴价值,需要的朋友可以参考下
  • js实现tab切换以及自动切换

    千次阅读 2016-11-23 14:20:48
    js实现tab切换以及自动切换
  • 原生js实现Tab切换(排他)功能 在前端的面试中,一旦遇到笔试题,基本上都会有Tab切换,今天我们来说一下如何使用原生js实现Tab切换功能。如图: HTML代码: <div class="wrap"> <div class="box">1&...
  • JS实现Tab切换,超简单只有几行代码

    热门讨论 2013-03-27 11:00:06
    JS实现Tab切换,超简单只有几行代码,点击按钮,在同一页面的不同内容切换
  • 直接先来个真相吧:【HTML代码】tab1tab2tab3这是TAB切换效果区域1这是TAB切换效果区域2这是TAB切换效果区域3【js】/*** tabs* @author 橡树小屋*/var tabs=function(){function tag(name,elem){return (elem||...
  • *{margin:0;padding:0} a{ display:inline-block;*display:inline;zoom:1;padding:5px 15px;... //利用js闭包实现tab切换 for(var j=0;j box[j].className="hide"; } box[_i].className="show"; } })(i); }
  • 原生js实现tab选项卡切换,代码结构清晰,保证让你一看就会,看完马上就变成自己的。另外,这个tab选项卡是有动态切换效果的哦。

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 47,459
精华内容 18,983
关键字:

js实现tab切换