精华内容
下载资源
问答
  • jsTab栏切换

    2021-01-10 14:03:24
    原生js实现复杂Tab栏切换(非常经典) <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=...

    原生js实现复杂Tab栏切换(非常经典)

    <!DOCTYPE html>
    <html lang="en">
    
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>Document</title>
    </head>
    <style>
        * {
            margin: 0;
            padding: 0;
        }
        
        ul,
        ol {
            list-style-type: none;
        }
        
        .wrap {
            position: relative;
            width: 700px;
            height: 400px;
            border: 1px solid #000;
            margin: 0 auto;
        }
        
        .left_btn {
            float: left;
            width: 200px;
            height: 700px;
        }
        
        .left_btn ul li {
            box-sizing: border-box;
            height: 100px;
            border: 2px solid pink;
            text-align: center;
            line-height: 100px;
            font-size: 30px;
            background-color: red;
            cursor: pointer;
        }
        
        .right_content {
            display: none;
            position: absolute;
            top: 0;
            right: 0;
            float: left;
            width: 500px;
            height: 400px;
            background-color: rgb(7, 142, 196);
        }
        
        .content_ {
            position: relative;
            height: 350px;
            background-color: pink;
        }
        
        .top_content {
            display: none;
            position: absolute;
            top: 0;
            right: 0;
            width: 500px;
            height: 350px;
            background-color: rgb(100, 7, 221);
            text-align: center;
            line-height: 350px;
            font-size: 50px;
        }
        
        .bt_btn {
            height: 50px;
            background-color: rgb(192, 189, 22);
        }
        
        .bt_btn ul {
            display: flex;
        }
        
        .bt_btn ul li {
            flex: 1;
            text-align: center;
            line-height: 50px;
            border: 1px solid #000;
            cursor: pointer;
        }
        
        li.active {
            background-color: #fff;
            color: #000;
        }
        
        p.active {
            display: block;
        }
        
        li.current {
            background-color: yellow!important;
            color: #fff;
        }
    </style>
    
    <body>
        <div class="wrap">
            <!-- 左侧按钮 -->
            <div class="left_btn">
                <ul>
                    <li>a</li>
                    <li>b</li>
                    <li>c</li>
                    <li>d</li>
                </ul>
            </div>
            <!-- 右侧整体区域 -->
            <div class="right_content " style="display: block;">
                <!-- 上面内容区域 -->
                <div class="content_">
                    <p class="top_content active">a1</p>
                    <p class="top_content">a2</p>
                    <p class="top_content">a3</p>
                    <p class="top_content">a4</p>
                </div>
                <!-- 小按钮区域 -->
                <div class="bt_btn">
                    <ul>
                        <li>a1</li>
                        <li>a2</li>
                        <li>a3</li>
                        <li>a4</li>
                    </ul>
                </div>
            </div>
            <div class="right_content">
                <!-- 上面内容区域 -->
                <div class="content_">
                    <p class="top_content active">b1</p>
                    <p class="top_content">b2</p>
                    <p class="top_content">b3</p>
                    <p class="top_content">b4</p>
                </div>
                <!-- 小按钮区域 -->
                <div class="bt_btn">
                    <ul>
                        <li>b1</li>
                        <li>b2</li>
                        <li>b3</li>
                        <li>b4</li>
                    </ul>
                </div>
            </div>
            <div class="right_content">
                <!-- 上面内容区域 -->
                <div class="content_">
                    <p class="top_content active">c1</p>
                    <p class="top_content">c2</p>
                    <p class="top_content">c3</p>
                    <p class="top_content">c4</p>
                </div>
                <!-- 小按钮区域 -->
                <div class="bt_btn">
                    <ul>
                        <li>c1</li>
                        <li>c2</li>
                        <li>c3</li>
                        <li>c4</li>
                    </ul>
                </div>
            </div>
            <div class="right_content">
                <!-- 上面内容区域 -->
                <div class="content_">
                    <p class="top_content active">d1</p>
                    <p class="top_content">d2</p>
                    <p class="top_content">d3</p>
                    <p class="top_content">d4</p>
                </div>
                <!-- 小按钮区域 -->
                <div class="bt_btn">
                    <ul>
                        <li>d1</li>
                        <li>d2</li>
                        <li>d3</li>
                        <li>d4</li>
                    </ul>
                </div>
            </div>
        </div>
        <script>
            var right_content = document.getElementsByClassName('right_content');
    
            for (var i = 0; i < right_content.length; i++) {
                tab(right_content[i]);
    
    
            }
    
            function tab(ele) {
    
                // 所有的p
                var right_content = document.getElementsByClassName('right_content');
                // console.log(right_content[0]);
    
                var ps = ele.getElementsByClassName('top_content');
                // console.log(ps);
                // 下方小按钮
                var bt_btns = ele.getElementsByTagName('li');
                for (var i = 0; i < bt_btns.length; i++) {
                    // 添加索引
                    bt_btns[i].index = i;
                    bt_btns[i].onmouseenter = function() {
                        // console.log(this.index);
                        // 清空所有按钮样式 和隐藏所有p内容
                        for (var j = 0; j < bt_btns.length; j++) {
                            bt_btns[j].className = '';
                            ps[j].style.display = 'none';
                        }
                        this.className = 'active';
                        ps[this.index].style.display = 'block';
                    }
                }
    
            }
            //    获取左边4个按钮
            // 获取 左侧ul
            var left_ul = document.getElementsByClassName('left_btn')[0];
            // 左侧4个按钮
            var left_lis = left_ul.getElementsByTagName('li');
            // 4个主体内容
            var right_content = document.getElementsByClassName('right_content');
            // 右侧小按钮
            // var bt_btn = document.getElementsByClassName('bt_btn');
            // var bt_btn_lis = bt_btn[0].getElementsByTagName('li');
            // console.log(bt_btn_lis);
            // console.log(bt_btn);
            // 左侧所有li按钮
            var btn_left = left_ul.getElementsByTagName('li');
            for (var i = 0; i < btn_left.length; i++) {
                btn_left[i].index = i;
                btn_left[i].onmouseenter = function() {
    
                    for (var i = 0; i < btn_left.length; i++) {
                        right_content[i].style.display = 'none';
                        left_lis[i].className = '';
    
                    }
                    // console.log(this.index);
                    right_content[this.index].style.display = 'block';
                    left_lis[this.index].className = 'current';
                }
            }
    
            // var btns_left =
        </script>
    </body>
    
    </html>

     

    展开全文
  • JS tab栏切换

    2020-08-28 13:13:58
    问题: 当我们点击下面相应的选项时,选项背景颜色和内容会... 代码: <!... <...tab切换</title> <style> * { margin: 0; padding: 0; } li { list-style-type: none; }

    问题:

    当我们点击下面相应的选项时,选项背景颜色和内容会跟随变化
    在这里插入图片描述

    代码:

    <!DOCTYPE html>
    <html>
    	<head>
    		<meta charset="utf-8">
    		<title>tab切换</title>
    		<style>
    			* {
    				margin: 0;
    				padding: 0;
    			}
    			
    			li {
    				list-style-type: none;
    			}
    			
    			.tab {
    				width: 978px;
    				margin: 100px auto;
    			}
    			
    			.tab_list {
    				height: 39px;
    				border: 1px solid #ccc;
    				background-color: #f1f1f1;
    			}
    			
    			.tab_list li {
    				float: left;
    				height: 39px;
    				line-height: 39px;
    				padding: 0 20px;
    				text-align: center;
    				cursor: pointer;
    			}
    			
    			.tab_list .current {
    				background-color: #c81623;
    				color: #fff;
    			}
    			
    			.item_info {
    				padding: 20px 0 0 20px;
    			}
    			
    			.item {
    				display: none;
    			}
    		</style>
    	</head>
    	<body>
    		<div class="tab">
    			
    			<div class="tab_list">
    				<ul>
    					<li class="current">商品介绍</li>
    					<li>规格与包装</li>
    					<li>售后保障</li>
    					<li>商品评价(50000</li>
    					<li>手机社区</li>
    				</ul>
    			</div>
    			
    			<div class="tab_con">
    				<div class="item" style="display: block;">
    					商品介绍模块内容
    				</div>
    				<div class="item">
    					规格与包装模块内容
    				</div>
    				<div class="item">
    					售后保障模块内容
    				</div>
    				<div class="item">
    					商品评价(50000)模块内容
    				</div>
    				<div class="item">
    					手机社区模块内容
    				</div>
    			</div>
    		</div>
    		
    		<script type="text/javascript">
    			//获取元素
    			var tab_list = document.querySelector(".tab_list");
    			var lis = tab_list.querySelectorAll("li");
    			var items = document.querySelectorAll(".item");
    			
    			//为li设置属性
    			for (var i = 0; i < lis.length; i++) {
    				lis[i].setAttribute("index",i);
    				lis[i].onclick = function() {
    
    					//切换菜单
    					for (var i = 0; i < lis.length; i++) {
    						lis[i].className = "";
    					}
    					this.className = "current";
    					
    					//处理内容
    					var index = this.getAttribute("index");
    					for (var i = 0; i < items.length; i++) {
    						items[i].style.display = "none";
    					}
    					items[index].style.display = "block";
    				}
    			}
    		</script>
    	</body>
    </html>
    
    

    运行结果:

    在这里插入图片描述

    展开全文
  • JSTab栏切换

    2021-05-14 16:03:00
    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta ...D.
    <!DOCTYPE html>
    <html lang="en">
    
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <meta http-equiv="X-UA-Compatible" content="ie=edge">
        <title>Document</title>
        <style>
            * {
                margin: 0;
                padding: 0;
            }
            
            li {
                list-style-type: none;
            }
            
            .tab {
                width: 978px;
                margin: 100px auto;
            }
            
            .tab_list {
                height: 39px;
                border: 1px solid #ccc;
                background-color: #f1f1f1;
            }
            
            .tab_list li {
                float: left;
                height: 39px;
                line-height: 39px;
                padding: 0 20px;
                text-align: center;
                cursor: pointer;
            }
            
            .tab_list .current {
                background-color: #c81623;
                color: #fff;
            }
            
            .item_info {
                padding: 20px 0 0 20px;
            }
            
            .item {
                display: none;
            }
        </style>
    </head>
    
    <body>
        <div class="tab">
            <div class="tab_list">
                <ul>
                    <li class="current">商品介绍</li>
                    <li>规格与包装</li>
                    <li>售后保障</li>
                    <li>商品评价(50000)</li>
                    <li>手机社区</li>
                </ul>
            </div>
            <div class="tab_con">
                <div class="item" style="display: block;">
                    商品介绍模块内容
                </div>
                <div class="item">
                    规格与包装模块内容
                </div>
                <div class="item">
                    售后保障模块内容
                </div>
                <div class="item">
                    商品评价(50000)模块内容
                </div>
                <div class="item">
                    手机社区模块内容
                </div>
    
            </div>
        </div>
        <script>
            // 获取元素
            var tab_list = document.querySelector('.tab_list');
            var lis = tab_list.querySelectorAll('li');
            var items = document.querySelectorAll('.item');
            // for循环绑定点击事件
            for (var i = 0; i < lis.length; i++) {
                // 开始给5个小li 设置索引号 
                lis[i].setAttribute('index', i);
                lis[i].onclick = function() {
                    // 1. 上的模块选项卡,点击某一个,当前这一个底色会是红色,其余不变(排他思想) 修改类名的方式
    
                    // 干掉所有人 其余的li清除 class 这个类
                    for (var i = 0; i < lis.length; i++) {
                        lis[i].className = '';
                    }
                    // 留下我自己 
                    this.className = 'current';
                    // 2. 下面的显示内容模块
                    var index = this.getAttribute('index');
                    console.log(index);
                    // 干掉所有人 让其余的item 这些div 隐藏
                    for (var i = 0; i < items.length; i++) {
                        items[i].style.display = 'none';
                    }
                    // 留下我自己 让对应的item 显示出来
                    items[index].style.display = 'block';
                }
            }
        </script>
    </body>
    
    </html>

     

    展开全文
  • 主要介绍了js tab栏切换代码实例解析,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下
  • js tab栏切换

    2019-10-06 09:00:17
    今天机试有个内容是做网易云课堂tab栏切换的,如下 先简单说下我当时的想法 1.先弄一个大div盒子,我命名为tab 2.在大盒子tab里面有两个小盒子,分别是标题栏(tab_list)和内容栏(tab_con) 3.采用display...

    今天机试有个内容是做网易云课堂tab栏切换的,如下

     

    先简单说下我当时的想法

    1.先弄一个大div盒子,我命名为tab

    2.在大盒子tab里面有两个小盒子,分别是标题栏(tab_list)和内容栏(tab_con)

    3.采用display:flex;使标题栏菜单和内容栏的内容水平对齐(可能待会放的代码不是很规范,但实现对齐效果)

    4.js编写鼠标移入事件,主要是利用display:none和display:block之间的切换。

    下面放下我当时写的代码吧,可能写得不是很正规,不符合习惯,请大家见谅

    由于代码太多分几部分说

    HTML部分——大致布局,标题栏和内容栏

        <div class="tab">
            <div class="tab_list">
                <ul>
                    <li class="active" >今日 20:00开抢</li>
                    <li>明天 10:00开抢</li>
                    <li>明天 14:00开抢</li>
                    <li>明天 20:00开抢</li>
                    <li>后天 10:00</li>
                    <li>后天 14:00</li>
                </ul>
            </div>
            <div class="tab_con">
               <div class="item" style="display: block">
               </div>
               <div class="item">               
               </div>
               <div class="item">               
                  </div>
               <div class="item">               
                   </div>
               <div class="item">               
                 </div>
               <div class="item">               
                   </div>
          
    </div> </div>

    部分内容区item区域的HTML代码,基本差不多

    <div class="item" style="display: block">
                   <div class="box">
                       <div class="product">
                           <a><img src="img/pic1.png"/></a>
                           <div class="price" >
                               <h3>javascript课程</h3>
                               <h5>妙学堂</h5>
                               <p>
                                   <span style="color: red;font-size: 16px;">¥49.9</span>
                                   <span style="text-decoration:line-through ;font-size: 10px;">¥1600</span>
                                   <span style="border: 3px gainsboro dashed;margin-left: 55px;font-size: 16px;">即将开抢</span>
                               </p>
                           </div>
                       </div>
                       <div class="product">
                           <a><img src="img/pic1.png"/></a>
                           <div class="price" >
                           <h3>javascript课程</h3>
                               <h5>妙学堂</h5>
                               <p>
                                   <span style="color: red;font-size: 16px;">¥49.9</span>
                                   <span style="text-decoration:line-through ;font-size: 10px;">¥1600</span>
                                   <span style="border: 3px gainsboro dashed;margin-left: 55px;font-size: 16px;">即将开抢</span>
                               </p>
                           </div>
                       </div>
                       <div class="product">
                           <a><img src="img/pic1.png"/></a>
                           <div class="price" >
                           <h3>javascript课程</h3>
                               <h5>妙学堂</h5>
                               <p>
                                   <span style="color: red;font-size: 16px;">¥49.9</span>
                                   <span style="text-decoration:line-through ;font-size: 10px;">¥1600</span>
                                   <span style="border: 3px gainsboro dashed;margin-left: 55px;font-size: 16px;">即将开抢</span>
                               </p>
                           </div>
                       </div>
                       <div class="product">
                           <a><img src="img/pic1.png"/></a>
                           <div class="price" >
                           <h3>javascript课程</h3>
                               <h5>妙学堂</h5>
                               <p>
                                   <span style="color: red;font-size: 16px;">¥49.9</span>
                                   <span style="text-decoration:line-through ;font-size: 10px;">¥1600</span>
                                   <span style="border: 3px gainsboro dashed;margin-left: 55px;font-size: 16px;">即将开抢</span>
                               </p>
                           </div>
                       </div>
                       <div class="product">
                           <a><img src="img/pic1.png"/></a>
                           <div class="price" >
                           <h3>javascript课程</h3>
                               <h5>妙学堂</h5>
                               <p>
                                   <span style="color: red;font-size: 16px;">¥49.9</span>
                                   <span style="text-decoration:line-through ;font-size: 10px;">¥1600</span>
                                   <span style="border: 3px gainsboro dashed;margin-left: 55px;font-size: 16px;">即将开抢</span>
                               </p>
                           </div>
                       </div>
                       
                       
                   </div>
               </div>

     

    CSS部分

    .tab{
              width: 100%;
              height: 300px;
              text-align: center;
              
              margin: 10px auto;
              background-color: ghostwhite;
          }
          .tab_list ul{
              display: flex;
              height: 50px;
              margin: 0 auto;
              padding: 0;
              
          }
          .tab li{
             
              list-style: none;
              height: 50px;
              line-height: 50px;
              flex:auto;
              
          }
    
          .tab_list .active{
              background-color: red;
              color: #ffffff;
          }
          .tab_con{
              margin: 10px auto;
              width: 100%;
              height: 200px;
              
          }
          .item{
              display: none;
          }
          .box{
              display: flex;
          }
          .product{
              
              flex: auto;
          }
          .product img{
              width: 220px;
              height: 120px;
                  
          }
           .price{
               position: relative;
              
              width: 220px;
              height: 80px;
          }
     
         .price p{
             margin: 0px;
             left: 0px;
             position: absolute;
         }

     

    JS部分

    <script>
            var tab_list=document.querySelector('.tab_list');
            var lis=tab_list.querySelectorAll('li');
            var items=document.querySelectorAll('.item');
            for(var i=0;i<lis.length;i++){
                lis[i].setAttribute('index',i);
    
                lis[i].onmouseover=function(){
                    for(var i=0;i<lis.length;i++){
                        lis[i].className='';
                    }
    
                    this.className='active';
                    var index=this.getAttribute('index');
                    console.log(index);
                    for(var i=0;i<items.length;i++){
                        items[i].style.display='none';
                    }
                    items[index].style.display='block';
                    
                }
            }
        </script>

    最终我的效果如下

    不是很相像,但还算过得去。。。。。。

    转载于:https://www.cnblogs.com/smile-xin/p/11421628.html

    展开全文
  • JS tab 栏切换的实现原理 实现效果如下 代码如下 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>tab栏练习</title> <style type="text/css"&...
  • js tab栏切换原理

    2019-04-15 22:32:57
    <!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8"> <title></title> <style> .box { width: 400px; margin...
  • 今天机试有个内容是做网易云课堂tab栏切换的,如下先简单说下我当时的想法1.先弄一个大div盒子,我命名为tab2.在大盒子tab里面有两个小盒子,分别是标题栏(tab_list)和内容栏(tab_con)3.采用display:flex;使标题栏...
  • js实现tab栏切换效果

    2020-10-15 00:11:34
    主要为大家详细介绍了js实现tab栏切换效果,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
  • 原生js实现tab栏切换

    2019-06-01 08:55:06
    tab切换
  • Tab栏切换js

    2020-12-07 15:33:20
    Tab栏切换 参考代码
  • 原生JS实现TAB栏切换

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

    2020-08-06 02:18:18
    <!DOCTYPE html> <html lang="en"> <head> ...meta charset="UTF-8">...tab栏切换</title> <style> .tab { position: absolute; border: 1px solid #555555; /*width: 6.
  • tab栏切换原理js

    2018-12-26 14:34:37
    tab栏切换原理js直接上代码 直接上代码 // An highlighted block &amp;lt;!DOCTYPE html&amp;gt; &amp;lt;html&amp;gt; &amp;lt;head lang=&quot;en&quot;&amp;gt; &amp...
  • js实现Tab栏切换

    千次阅读 2019-05-19 15:06:41
    主要用到排他思想,另外给tab每个li标签添加一个index自定义属性(还需要用js获取) <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" ...
  •  在日常生活中很多时候我们都会碰到tab栏切换效果,类似于下面的 图一 这种效果事项的办法有很多很多,今天我们来看看其中的一种。 需求分析 点击上面的tab栏 下面的内容跟着改变 点击tab栏以后点击的哪个会变...
  • vue.js 实现tab栏切换

    2019-10-13 16:55:39
    看一下常见的tab栏切换的场景: 根据上面的例子分析tab栏主要结构: 首先有三个按钮,当前选中的按钮有样式。比如一个为选中的,那么第一个为高亮状态。 三个按钮分别为图片,专栏,热点 每当你点击的时候,下面的...
  • // 当前标签添加choosed类,其他移除 $(this).addClass('choosed').siblings().removeClass('choosed'); // 获得当前点击索引 let index = $(this).index(); // 显示对应的标签页 $('.boxFooter div').eq...
  • 原生js实现tab栏切换效果

    多人点赞 2021-04-06 17:43:25
    首先我们来看一下原生js实现的效果 下面就开始直接上代码了 index.html <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta ...
  • tab栏切换 有2个大的模块:上面的模块选项卡(tab_list)、下面的模块内容(tab_con) <div class="tab"> <!-- 下面的模块内容会与上面的模块选项卡变化而变化,所以 两者的数量应该一一对应,相匹配。 -...

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 13,422
精华内容 5,368
关键字:

jstab栏切换