精华内容
下载资源
问答
  • 原生js实现tab切换

    千次阅读 2018-07-30 16:07:34
    <!--tab切换--> <ul class="tabBar"> <li> <a class="active" href="#">tab1</a> </li> <li> <a href="#">tab2</a> </li...
    <!--tab切换-->
    <ul class="tabBar">
        <li>
            <a class="active" href="#">tab1</a>
        </li>
        <li>
            <a href="#">tab2</a>
        </li>
        <li>
            <a href="#">tab3</a>
        </li>
        <li>
            <a href="#">tab4</a>
        </li>
        <li>
            <a href="#">tab5</a>
        </li>
    </ul>
    <!--选项卡-->
    <div class="tabs" style="display: block;">tab1</div>
    <div class="tabs" style="display: none;">tab2</div>
    <div class="tabs" style="display: none;">tab3</div>
    <div class="tabs" style="display: none;">tab4</div>
    <div class="tabs" style="display: none;">tab5</div>

    JS

    var tabs = document.getElementsByClassName("tabs") //tabr容器
    var lis = document.getElementsByTagName("a") //获取tab切换a标签
    	
    	//tab切换
    	window.onload = function() {
    		for(var i = 0; i < lis.length; i++) {
    			lis[i].index = i;
    			lis[i].onclick = function() {
    				for(var j = 0; j < lis.length; j++) {
    					lis[j].className = "";
    				}
    				this.className = "active";
    				for(var k = 0; k < tabs.length; k++) {
    					tabs[k].style.display = "none";
    				}
    				tabs[this.index].style.display = "block";
    			}
    		}
    	}

    CSS

    .active {
    	padding: 0.3rem;
    	border-bottom: 0.2rem solid #53a2ef;
    	color: #53a2ef!important;
    }

    复制粘贴直接上手!!!!!!!!

     

    喜欢上方小程序,需要源码的,添加博主微信私信小编.

    展开全文
  • 看了下,网上给出的Demo大多是鼠标在移入的时候做tab切换,而我最近的博客项目是希望实现知乎登录页面那样的可以点击切换的tab,所以,我自己实现了一下 切换的实现思路 HTML: 布局方面,我选择了div标签作为容器...

    看了下,网上给出的Demo大多是鼠标在移入的时候做tab切换,而我最近的博客项目是希望实现知乎登录页面那样的可以点击切换的tab,所以,我自己实现了一下

    切换的实现思路

    • HTML:
      布局方面,我选择了div标签作为容器,做横向排列
      <div class="test selected"></div>
      <div class="test"></div>
      <div class="test"></div>
      <div class="test"></div>
      
    • CSS:
      因为在做切换时,选中的div是要有区别于其他未被选中div的,所以,可以通过不同的选择器来切换视图不同的状态
      .test {
          display: inline-block;
          height: 100px;
          width: 100px;
          background-color: rebeccapurple;
      }
      
      .selected {
          background-color: burlywood;
      }
      
    • JS:
      1、为每一个div元素添加点击事件
      2、通过点击获取的每一个div的index和当前选中的div的index做对比,如果相等,则表示点击的是已选中的div ,期间不会发生任何变化,反之,之前已选中的div失去选中状态,当前选中div添加选中状态
       function init() {
       // 默认选中的index,起始值为0
           let currentIndex = 0
           let divs = document.getElementsByClassName('test')
           for (let i = 0; i < divs.length; i++) {
               const div = divs[i]
               div.index = i
               div.addEventListener('click', () => {
                   if (div.classList.contains('selected')) {
                       currentIndex = div.index
                   }
                   // 当前正在点选的div是已经选中的div
                   if (currentIndex === div.index) {
    
                   } else {
                       let currentDiv = divs[currentIndex]
                       currentDiv.classList.remove('selected')
                       let clickDiv = divs[div.index]
                       clickDiv.classList.add('selected')
                       //更新当前选中div的index
                       currentIndex = div.index
                   }
               })
           }
       }
       init()
    

    展示不同内容的实现思路

    做tab切换大多都是为了点击不同的item去展示不同的内容,我说一下我的思路

    • HTML:
      放入希望去展示的布局就好
       <div class="first-content">
           第一页
       </div>
       <div class="second-content">
           第二页
       </div>
       <div class="third-content">
           第三页
       </div>
       <div class="fourth-content">
           第四页
       </div>
      
    • CSS:
      这里我使用了display属性来做视图的切换,而非visibility,这是因为visibility属性只是单纯的做了隐藏和展示,原有的流布局不会改变。
      .first-content,
      .second-content,
      .third-content,
      .fourth-content {
          display: none;
      }
    
      .first-content {
          display: block;
      }
    
    • JS:
      这一部分js的工作很简单,只需要拿到所有需要切换的内容,然后根据上面切换获得的index去取值,并修改style就可以
     const contents = document.querySelectorAll('.first-content, .second-content, .third-content, .fourth-content')
        function changeContent(index) {
            for (let i = 0; i < contents.length; i++) {
                const content = contents[i];
                if (index === i) {
                    content.style.display = 'block'
                } else {
                    content.style.display = 'none'
                }
            }
        }
    

    完整代码

    <!DOCTYPE html>
    <html lang="en">
    
    <head>
        <meta charset="UTF-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>Document</title>
    </head>
    
    <body>
        <!-- tab -->
        <div class="test selected"></div>
        <div class="test"></div>
        <div class="test"></div>
        <div class="test"></div>
        <!-- content -->
    
        <div class="first-content">
            第一页
        </div>
        <div class="second-content">
            第二页
        </div>
        <div class="third-content">
            第三页
        </div>
        <div class="fourth-content">
            第四页
        </div>
    
    </body>
    
    <style>
        .test {
            display: inline-block;
            height: 100px;
            width: 100px;
            background-color: rebeccapurple;
        }
    
        .selected {
            background-color: burlywood;
        }
    
        .first-content,
        .second-content,
        .third-content,
        .fourth-content {
            display: none;
        }
    
        .first-content {
            display: block;
        }
    </style>
    
    <script>
    
        const contents = document.querySelectorAll('.first-content, .second-content, .third-content, .fourth-content')
    
        function init() {
            let currentIndex = 0
            let divs = document.getElementsByClassName('test')
            for (let i = 0; i < divs.length; i++) {
                const div = divs[i]
                div.index = i
                div.addEventListener('click', () => {
                    if (div.classList.contains('selected')) {
                        currentIndex = div.index
                    }
                    if (currentIndex === div.index) {
    
                    } else {
                        let currentDiv = divs[currentIndex]
                        currentDiv.classList.remove('selected')
                        let clickDiv = divs[div.index]
                        clickDiv.classList.add('selected')
                        currentIndex = div.index
                        changeContent(currentIndex)
                    }
                })
            }
        }
        init()
    
        function changeContent(index) {
            for (let i = 0; i < contents.length; i++) {
                const content = contents[i];
                if (index === i) {
                    content.style.display = 'block'
                } else {
                    content.style.display = 'none'
                }
            }
        }
    
    </script>
    
    </html>
    
    展开全文
  • 原生js tab选项卡新闻列表切换效果代码,我们也习惯于称为"滑动门",一般在网站里面,我们可以做一个选项卡的特效,在页面展示新闻信息等,非常适合在企业网站或者门户网站中使用。php中文网推荐下载!
  • 原生js实现的tab选项卡切换,代码结构清晰,保证让你一看就会,看完马上就变成自己的。另外,这个tab选项卡是有动态切换效果的哦。
  • ">第三个div> div> div> css部分 js部分 <script> //获取元素 var ali=document.getElementById('oul').children; var acon=document.getElementById('con').children; for(var i=0;i;i++){ //存储i的值 相当于oul的...

    html

     <div id="box">
            <ul id="oul">
                <li class="uli">1</li>
                <li class="uli">2</li>
                <li class="uli">3</li>
            </ul>
            <div id="con">
                <div id="con1" style="display: block;">第一个</div>
                <div id="con1" style="background-color: yellow;">第二个</div>
                <div id="con1" style="background-color:green;">第三个</div>
            </div>
        </div>
    

    css部分

    <style type="text/css">
            * {
                margin: 0;
                padding: 0;
            }
            
            #box {
                width: 600px;
                height: 300px;
                /* border: 1px solid #000; */
                margin:0 auto;
            }
            
            #box>ul {
                width: 600px;
                height: 50px;
                list-style: none;
            }
            #box>ul>li {
                float: left;
                width: 198px;
                height: 48px;
                border: 1px solid cyan;
            }
            #con{
                width: 600px;
                height: 250px;
                /* border: 1px solid blue; */
            }
            #con1{
                width: 600px;
                height: 250px;
                background-color:rebeccapurple;
                display: none;
            }
        </style>
    

    js部分

    <script>
            //获取元素
            var ali=document.getElementById('oul').children;
            var acon=document.getElementById('con').children;
    
            for(var i=0;i<acon.length;i++){
                //存储i的值  相当于oul的第一个子元素等于con的第一个子元素  (通俗来说就是一一对应)
                ali[i].index=i;
                //循环设置点击事件
                ali[i].onclick=function(){
                    for(var i=0;i<acon.length;i++){
                     acon[i].style.display="none";
                    }
                    //this指的是事件前的对象  (ali[i].index=i)
                    acon[this.index].style.display='block';
                }
            }
        </script>
    
    展开全文
  • 原生JS实现tab切换

    千次阅读 2018-08-28 23:18:53
    现在利用之前我们学过的JavaScript知识,实现选项卡切换的效果。 &lt;!DOCTYPE html&gt; &lt;html lang="en"...tab切换&lt;/title&gt; &lt;style type="

    现在利用之前我们学过的JavaScript知识,实现选项卡切换的效果。

    <!DOCTYPE html>
    <html lang="en">
    <head>
    	<meta charset="UTF-8">
    	<title>tab切换</title>
    	<style type="text/css">
         /* CSS样式制作 */  
        * {margin:0px;padding:0px;font:12px normal "microsoft yahei";}
    	a {text-decoration: none;color:black;display:block;}
    	a:hover {text-decoration:none;color:#336699;}
        #tabs ul {
        	list-style:none;
        	display:block;
        	height:30px;
        	line-height:30px;
        	border-bottom:2px solid saddlebrown;
        	width:300px;}
        #tabs ul li {
        	float:left;
        	cursor:pointer;
        	width:60px;
        	height:28px;
        	line-height:28px;
        	margin:0 3px;
        	border:1px solid #aaaaaa;
        	border-bottom:none;
        	text-align:center;
    		}
     	#tabs ul li.on {
            border-top:2px solid saddlebrown;  
            border-bottom: 2px solid #fff;  
            }
        #tabs div {
        	width:290px;
            height:120px;  
            line-height: 25px;  
            border:1px solid #336699;  
            border-top:none;  
            padding:5px;  
            }  
        .hide {  
            display:none;  
            } 
        </style>
        <script type="text/javascript">
             
        // JS实现选项卡切换
             window.onload = function(){  
                 var oTab = document.getElementById("tabs");  
                 var oUl = oTab.getElementsByTagName("ul")[0];  
                 var oLis = oUl.getElementsByTagName("li");  
                 var oDivs= oTab.getElementsByTagName("div");  
      
                 for(var i= 0;i < oLis.length;i++){  
                     oLis[i].index = i;  
                     oLis[i].onclick = function() {  
                         for(var n= 0;n< oLis.length ;n++){  
                             oLis[n].className = "";  
                             oDivs[n].className = "hide";  
                         }  
                         this.className = "on";  
                         oDivs[this.index].className = "";  
                     }  
                 };  
             }  
        
        </script>
    </head>
    <body>
    	<div id="tabs">
    		<ul>
    			<li class="on">房产</li>
    			<li class="off">家居</li>
    			<li class="off">二手房</li>
    		</ul>
    		<div id = "firstPag" class = "show">
    			<a href="#">275万购昌平邻铁三居 总价20万买一居</a>
    	    	<a href="#">200万内购五环三居 140万安家东三环</a>
    	    	<a href="#">北京首现零首付楼盘 53万购东5环50平</a>
    	    	<a href="#">京楼盘直降5000 中信府 公园楼王现房</a>
    		</div>
      		<div id = "secondPag" class = "hide">
      			<a href="#">40平出租屋大改造 美少女的混搭小窝</a>
    	     	<a href="#">经典清新简欧爱家 90平老房焕发新生</a>
    	     	<a href="#">新中式的酷色温情 66平撞色活泼家居</a>
    	     	<a href="#">瓷砖就像选好老婆 卫生间烟道的设计</a>
    		</div>
    		<div id = "thirdPag" class = "hide">
    			<a href="#">通州豪华3居260万 二环稀缺2居250w甩</a>
         		<a href="#">西3环通透2居290万 130万2居限量抢购</a>
         		<a href="#">黄城根小学学区仅260万 121平70万抛!</a>
         		<a href="#">独家别墅280万 苏州桥2居优惠价248万</a>
    		</div>
    	</div>
    </body>
    </html>

     

    展开全文
  • 原生js TAB切换

    2017-09-06 19:48:49
    Document *{ margin: 0; padding: 0; } img{ border:0; } ol, ul ,li{list-style: none;} .div-1{ width:
  • 前两天学了两种不同的tab切换方式,今天贴出来做一个技术总结,代码有不太规范的地方请多多见谅 第一种通过if判断的形式代来实现功能,码量比较少。 第二种通过添加自定义属性和清除属性再添加属性来实现的,代码量...
  • 原生js实现tab点击切换事件 原本Vue中不涉及交互的页面让被抽离出来用原生实现,突然写原生,手抖的无从下手。。。 实现的效果是这样的(原本用的是模板字符串循环到页面上的,最后得知这个页面是固定没有更改的可能...
  • 原生JS实现tab切换--web前端开发

    万次阅读 2017-08-25 17:01:26
    tab切换非常常见,应用非常广泛,比较实用,一般来说是一个网站必不可少的一个效果。例如:https://123.sogou.com/中的一个tab部分: 1、案例源代码 tab切换 *{margin: 0;padding: 0} aside{width:...
  • 如果你的页面只有一个tab切换的地方需要调用js效果 单独为了它你还要为页面加载一个jQuery插件,想必是极痛苦的 所有很多时候,jQuery特效也不是万能的,偶尔来个原生js效果也是必须的 今天无聊,...
  • 主要为大家详细介绍了原生js+css实现tab切换功能,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
  • 原生js实现tab切换

    2019-06-01 08:55:06
    tab切换
  • 本文实例为大家分享了原生js实现tab选项卡切换效果的代码,供大家参考,具体内容如下 1.html部分  <body> <div id=tab> <div class=tab_menu> <li class=selected><a>时事</a></li> <li><a>体育</a>...
  • 原生js oop思维手撸tab选项卡 采用es3 +闭包+ OOP的思想封装tab选项卡切换; 效果图 1.目录结构 | -- my-tab | -- inedx.html #视图 | -- js #逻辑代码 | -- my-tab.js #核心代码模块 | -- tpl.js #...
  • 分析个人用原生JS获取类名元素的代码: 代码如下: getByClassName:function(className,parent){  var elem = [],  node = parent != undefined&&parent.nodeType==1?parent.getElementsByTagName(‘*’):document...
  • 原生js实现tab切换 与 jq实现tab切换 原生js实现 **css部分** <style> *{ margin: 0; padding: 0; } .warp{ width: 100%; background-color: cyan; display: flex; } .top{
  • <div class="fishqc-tap"> <div ms-class="[@codePic!=''&&@codeInfo!=''?'tapHome':'changeToThree']"> <a href="javascript:;" onClick="javascrip...
  • 本文实例讲述了js实现TAB切换对应不同颜色的代码。分享给大家供大家参考。具体如下: 这是一个个性化的TAB菜单,每个TAB卡片的背景颜色都不相同,鼠标点击上部的TAB,在主体内容区可看到颜色的变化。 运行效果截图...
  • 原生js实现tab切换功能

    千次阅读 2019-05-10 09:21:30
    这个tab栏我用了两个排他功能来实现的。 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <style> *{ marg...
  • &lt;!DOCTYPE html&gt; &lt;html lang="en"&gt; &lt;head&gt;...百度面试做tab切换并且内容随之变化&lt;/title&gt; &lt;style&gt; #city div{
  • 原生js简单的Tab选项卡切换支持多个静态选项卡切换代码
  • 原生js实现Tab切换(排他)功能 在前端的面试中,一旦遇到笔试题,基本上都会有Tab切换,今天我们来说一下如何使用原生js实现Tab切换功能。如图: HTML代码: <div class="wrap"> <div class="box">1&...
  • The second tab < / h2 > < p > This tab hasn 't got any Lorem Ipsum in it. But the content isn' t very exciting all the same . < / p > < / article > < article > < h2 > The third tab < / h2...
  • 效果: 总体思路: 我是利用动态改变类名来实现的 1.提前设计好一个类名用于体现选项卡被选中之后的样式,再设计一个类名用于体现与当前选项卡对应的内容区的状态 ... 注:详细实现过程,代码中都有注释 ...
  • 原生js tab代码选项卡里面按钮控制图片滚动选项卡切换
  • 原生js实现tab选项卡切换功能

    千次阅读 2018-10-29 15:39:38
    本文通过两种原生js方法实现tab选项卡切换功能 &amp;lt;!DOCTYPE html&amp;gt; &amp;lt;html&amp;gt; &amp;lt;head&amp;gt; &amp;lt;title&amp;gt;tab选项卡&amp;lt;/...

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 6,619
精华内容 2,647
关键字:

原生jstab切换