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

    2021-03-25 22:41:09
    原生js实现tab切换 1.添加自定义属性,让自己知道点击的时候知道是点击的哪个 2,排他思想,先把其它所有样式去掉,再把自己所需要的样式加上 html代码 <div class="main"> <ul> <li class=...

    原生js实现tab切换
    1.添加自定义属性,让自己知道点击的时候知道是点击的哪个
    2,排他思想,先把其它所有样式去掉,再把自己所需要的样式加上
    html代码

      <div class="main">
        <ul>
          <li class="active">1</li>
          <li>2</li>
          <li>3</li>
        </ul>
        <div class="content">
          <ol>
            <li>1</li>
            <li>2</li>
            <li>3</li>
          </ol>
        </div>
      </div>
    

    css样式

    ul,ol,li,div{
          padding:0;
          margin:0;
        }
        .main{
          width:600px;
          height: 400px;
          background: #f5f5f5;;
        }
        ul{
          height:50px;
          border-bottom:1px solid #000;
        }
        ul li{
          float: left;
          list-style: none;
          width:80px;
          height: 50px;
          background:orange;
        }
        .active{
          color:#fff;
        }
        .content{
          width:600px;
          height:350px;
          background:#ccc;
          overflow: hidden;
        }
        ol{
          width:100%;
          height:100%;
        }
        ol li{
          width:100%;
          height: 100%;
          float: left;
          background: green;
        }
    

    js代码

       window.onload=function(){
          let ul=document.getElementsByTagName("ul")[0];
          let uls=ul.getElementsByTagName("li");
          let ol=document.getElementsByTagName("ol")[0];
          let ols=ol.getElementsByTagName("li")
          console.log("uls",uls)
          for(let i=0;i<uls.length;i++){
          	//为每个li添加一个自定义属性
            uls[i].index=i;
            uls[i].onclick=function(){
            // 打印看下自己添加的自定义属性
              console.log(uls[i].index)
              // 去所有li的样式
              for(let j=0;j<uls.length;j++){
                uls[j].className="";
                ols[j].style.display="none"
              }
              // 再把当前点击的li所需要的样式加上,this很重要
              uls[this.index].className="active";
              ols[this.index].style.display="block"
            }
          }
        }
    
    展开全文
  • 原生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来说简化了好多! 仅供参考!

    展开全文
  • 所谓TAB切换就是类似于淘宝,京东左侧购物栏那种样式。1.html:&lt;!DOCTYPE html&gt; &lt;head&gt; &lt;meta content="text/html;charset=utf-8"&gt; &lt;title&gt...

    所谓TAB切换就是类似于淘宝,京东左侧购物栏那种样式。

    1.html:

    <!DOCTYPE html>
    	<head>
    		<meta content="text/html;charset=utf-8">
    		<title>tab切换</title>
    		<link rel="stylesheet" href="css/index.css" type="text/css"/>
    	</head>
    	<body>
    		<div id="wrap">
    			<div id="left">
    				<ul id="leftList">
    					<li>标题1</li>
    					<li>标题2</li>
    					<li>标题3</li>
    					<li>标题4</li>
    					<li>标题5</li>
    				<ul>
    			</div>
    			<div id="right">
    				<div>1</div>
                                    <div>2</div>
                                    <div>3</div>
                                    <div>4</div>
                                    <div>5</div>
    			</div>
    		</div>
    	</body>
    	<script src="js/index.js"></script>
    </html>

    2.css样式

    *{
    	margin:0;
    	padding:0;
    }
    #wrap{
    	width:500px;
    	min-width:500px;
    	height:252px;
    	overflow:hidden;
    }
    #left{
    	width:40%;
    	height:100%;
    	background-color:red;
    	border:1px solid red;
    	float:left;
    	box-sizing:border-box;/*此元素的内边距和边框不再会增加它的宽度*/
    }
    #right{
    	width:60%;
    	height:100%;
    	background-color:yellow;
    	border:1px solid red;
    	border-left-style:none;
    	float:left;
    	box-sizing:border-box;/*此元素的内边距和边框不再会增加它的宽度*/
    	display:none;
    }
    #leftList{
    	list-style:none;
    }
    li{
    	width:100%;
    	height:50px;
    	background-color:red;
    	color:white;
    	text-indent:2em;/*段落首行文字缩进2em*/
    	line-height:50px;
    }
    .current{
    	background-color:white;
    	color:red;
    	border-right-style:none;
    	border-left:1px solid red;
    }
    .close{
    	display: none;
    }
    
    .show{
    	width: 100%;
    	height: 100%;
    	float:left;
    	background-color: #CCC;
    	text-align: center;
    	font-size: 100px;
    	color: black;
    	display: block;
    }

    3.js

    var wrapDiv=document.getElementById("wrap");
    var leftDiv=document.getElementById("left");
    var rightDiv=document.getElementById("right");
    var lis=document.getElementsByTagName("li");//获取左侧列表
    var divs=document.querySelectorAll("#right>div");
    /***操作***/
    //tab切换
    for(var i=0;i<lis.length;i++){
    	lis[i].index=i;
    	lis[i].οnmοuseοver=function(){
    		for(var j=0;j<divs.length;j++){
    			lis[j].className="";
    			divs[j].className="close";
    		}
    		this.className="current";
    		rightDiv.style.display="block";
    		divs[this.index].className="show";
    	}
    }
    //处理事件冒泡
    wrapDiv.οnmοuseοut=function (e) {
    	if (!e) e = window.event;
    	var reltg = e.relatedTarget ? e.relatedTarget : e.toElement;
    	while (reltg && reltg != this) reltg = reltg.parentNode;
    	if (reltg != this) {
    		rightDiv.style.display="none";
    		for(var j=0;j<divs.length;j++){
    			lis[j].className="";
    			divs[j].className="close";
    		}
    	}
    }

                

    其中曾出现的bug有,实现鼠标移出id为wrap这个div时回到最初样子这个功能时,当从右边出来时,左边的div就会消失。经过查询资料我发现都是冒泡事件搞的鬼。当鼠标移出移进子元素时,子元素的onmouseover事件和onmouseout事件会触发,但是它自己没有这两个事件啊,就把这两个事件传递给了它的父元素,父元素有这两个事件所以就发生了我们看到的情况。

        那么怎样才能避免这种情况的发生勒?

        在此我推荐大家可以看看这篇文章http://www.jb51.net/article/90487.htm

    展开全文
  • 原生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切换(排他)功能 在前端的面试中,一旦遇到笔试题,基本上都会有Tab切换,今天我们来说一下如何使用原生js实现Tab切换功能。如图: HTML代码: <div class="wrap"> <div class="box">1&...
  • 原生js 实现tab切换

    2019-09-13 04:30:10
    <script src="tabSwitch.js" type="text/javascript" charset="utf-8"> </html>``` ```//网页运行时加载 window.onload = function() { var tabBox = document.getElementById("tabBox"); fTabBox(tabBox); }...
  • 原生js实现tab选项卡切换,代码结构清晰,保证让你一看就会,看完马上就变成自己的。另外,这个tab选项卡是有动态切换效果的哦。
  • *{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切换

    2019-09-13 04:30:14
    <script src="tabSwitch.js" type="text/javascript" charset="utf-8"> //网页运行时加载 window.onload = function() { var tabBox = document.getElementById("tabBox"); fTabBox(tabBox); } //tab切换...
  • tab切换非常常见,应用非常广泛,比较实用,一般来说是一个网站必不可少的一个效果。例如:https://123.sogou.com/中的一个tab部分: 1、案例源代码 <!DOCTYPE html>...
  • <div>333333333333333</div> <div>444444444444444</div> </div> <script type="text/javascript"> var lis = document.querySelectorAll(".tabTop>li"); var divs = document.querySelectorAll...
  • 本文主要介绍了使用原生javascript实现Tab选项卡切换的功能,虽然jQuery有很多类似的插件,单jQuery库着实有点庞大,这种小功能还是直接用javascript来做就好了。
  • 原生js实现tab切换

    2019-06-01 08:55:06
    tab切换
  • 主要为大家详细介绍了原生js实现tab选项卡,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
  • 原生JS实现TAB切换

    千次阅读 2017-06-30 00:42:05
    之前上传了一个jquery实现tab切换的博客,这个是原生js实现tab切换的案例,不多说直接上代码!同样复制粘贴就能看到效果哦! <!DOCTYPE html> <title></title> .Box{ width: 2

空空如也

空空如也

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

原生js实现tab切换