精华内容
下载资源
问答
  • tab栏切换 案例(必掌握)
    2022-02-19 18:55:49
    <style>
            ul {
                list-style: none;
    
            }
    
            .tab {
                width: 578px;
                height: 300px;
            }
    
            .tab_list ul {
                width: 578px;
                height: 50px;
                background-color: #eee;
                padding-left: 0;
                margin: 0;
                border: 1px solid #ddd;
            }
    
            .tab_list li {
                float: left;
                font-size: 18px;
                height: 50px;
                line-height: 50px;
                padding: 0 20px;
                cursor: pointer;
            }
    
            .tab_list .current {
                background-color: #c81623;
                color: #fff;
            }
    
            .item {
                display: none;
            }
        </style>
    </head>
    
    <body>
        <div class="tab">
            <div class="tab_list">
                <ul>
                    <li class="current">商品介绍</li>
                    <li>规格与包装</li>
                    <li>售后保障</li>
                    <li>商品评价</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">
                    商品评价模块内容
                </div>
                <div class="item">
                    手机社区模块内容
                </div>
            </div>
        </div>
        <script>
            // 获取元素
            var tab_list = document.querySelector('.tab_list');
            var lis = document.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');
                    // 排他思想,让其他的item都隐藏,留下自己
                    for (var i = 0; i < items.length; i++) {
                        items[i].style.display = 'none';
                    }
                    items[index].style.display = 'block';
                }
            }
        </script>
    </body>

    更多相关内容
  • tab栏切换案例

    2022-03-16 10:32:13
    01-tab栏切换案例 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content...

    01-tab栏切换案例

    <!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>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>
            //1. 上的模块选项卡,点击某一个,当前这一个底色会是红色,其余不变(排他思想) 修改类名的方式
            //获取元素
            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++) {
                // 开始给五个小li设置索引号
                lis[i].setAttribute('index', i);
                lis[i].onclick = function() {
                    //干掉所有人 其余的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>
    

    效果展示

    在这里插入图片描述

    02- H5自定义属性

    <!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>H5自定义属性</title>
        <!-- 1.自定义属性的目的:是为了保存并使用数据,有些数据可以保存到页面中而不用保存到数据库中 -->
        <!-- 自定义属性获取是通过getAttribute('属性') 获取-->
        <!-- 但是有些自定义属性很容易引起歧义,不容易判断是元素的内置属性还是自定义属性 -->
    </head>
    
    <body>
        <!-- 2.H5规定某些自定义属性data-开头做为属性名并且赋值 -->
        <!-- 比如 <div data-index="1"></div> -->
        <!-- 或者使用js设置:element.setAttribute('data-index',2) -->
        <div getTime="20" data-index="2" data-list-name="andy"></div>
        <script>
            var div = document.querySelector('div'); //获取div
            //console.log(div.getTime);//输出undefined 因为自定义属性值不能通过此方式来获取
            console.log(div.getAttribute('getTime')); //正确方式
            div.setAttribute('data-time', 20);
            // 3.获取H5自定义属性
            // 方法(1)兼容性获取 element.getAttribute('data-index');
            // 方法(2)H5新增element.dataset.index或者element.dataset['index']  它只能获取data开头的 ie11以上支持
            console.log(div.dataset.index); //H5新增获取自定义属性的方法  dataset是个集合,里面存放了所有以data开头的属性
            console.log(div.dataset);
            console.log(div.dataset['index']);
            // 如果自定义属性里面有多个-链接的单词,我们获取的时候采取驼峰命名法
            console.log(div.dataset.listName);
            console.log(div.dataset['listName']);
        </script>
    </body>
    
    </html>
    
    展开全文
  • 黑马tab栏切换案例

    2022-03-22 21:07:05
    代码: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <...meta name="viewport" content="width=device-width, initial-scale=1.0">...title&

    代码:

    <!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>
        <style>
            * {
                margin: 0;
                padding: 0;
            }
            
            li {
                list-style: none;
            }
            .tab {
                width: 800px;
                margin: 100px auto;
                
            }
            .tab_list {
                
                height: 30px;
               
                border-bottom: 1px solid red;
    
            }
            
            .tab_list ul li {
                float: left;
                padding:5px 50px 5px 50px ;
                text-align: center;
                cursor: pointer;
            }
          
            .tab_list .current {
                background-color: red;
                color: #fff;
            }
            .item {
                display: none;
            }
    
        </style>
    </head>
    <body>
       <div class="tab">
        <div class="tab_list">
            
                <ul>
                    <li class="current">商品介绍</li>
                    <li>规格与包装</li>
                    <li>售后保障</li>
                    <li>商品评价(1.1万+)</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>
       </div>
       <script>
           //2.上面的选项卡,点击某一个 当前这一个底色会是红色,其余不变(排他思想) 修改类名的方式
        //    获取元素
        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(){
                //排他思想  干掉其他人
                for(var i=0;i<lis.length;i++){
                    lis[i].className='';
                }
                // 留下我自己
                this.className='current';
                //2.下面的显示内容模块
                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>
    </body>
    </html>

    效果图:

     

     

    展开全文
  • <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> <style type="text/css"> *{ margin: 0; padding: 0;... }
    <!DOCTYPE html>
    <html>
    	<head>
    		<meta charset="utf-8">
    		<title></title>
    		<style type="text/css">
    			*{
    				margin: 0;
    				padding: 0;
    			}
    			.box{
    				width: 450px;
    				height: 450px;
    				margin: 0 auto;
    			}
    			#one{
    				width: 100%;
    				display: flex;
    				flex-direction: row;
    				justify-content: space-between;
    			}
    			#one li{
    				list-style: none;
    				width: 75px;
    				height: 45px;
    				line-height: 45px;
    				border: 1px solid red;
    				text-align: center;
    			}
    			#two{
    				width: 100%;
    				height: 200px;
    			}
    			#two li{
    				list-style: none;
    				width: 100%;
    				height: 100%;
    				border: 1px solid lightgray;
    				display: none;
    			}
    			#two .current{
    				display: block;
    			}
    			.aa{
    				background-color: red;
    			}
    		</style>
    		<script src="./jquery-3.3.1.js"></script>
    	</head>
    	<body>
    		<div class="box">
    			<ul id="one">
    				<li>1</li>
    				<li>2</li>
    				<li>3</li>
    			</ul>
    			<ul id="two">
    				<li class="current"></li>
    				<li></li>
    				<li></li>
    			</ul>
    		</div>
    		<script src="jquery-3.3.1.js"></script>
    		<script type="text/javascript">
    			$(function(){
    				$('#one').delegate('li','click',function(){
    					var index=$(this).index();
    					// console.log(index);
    					$(this).addClass('aa').siblings().removeClass('aa');
    					var html=$(this).html();
    					$('#two li').eq(index).html(html);
    					$('#two li').eq(index).addClass('current').siblings().removeClass('current');
    				})
    			})
    		</script>
    	</body>
    </html>
    
    
    展开全文
  • 点击tab栏,可以切换效果. 点击+号,可以添加tab项和内容项. 点击x号,可以删除当前的tab项和内容项 双击tab项文字或者内容项文字,可以修改里面的文字内容. 3.抽象对象 抽象对象:Tab对象 该对象具有切换功能 该...
  • 本文实例讲述了jQuery插件实现tab栏切换功能。分享给大家供大家参考,具体如下: 效果: 核心代码:自己写了一个方法,需要用的时候直接调用就可以了. 方法如下: (function ($) { //给$的fn添加方法 $.fn.tabs=...
  • 点击tab栏可以切换效果; 点击+号,可以添加tab项和内容项: 1. 创建新的选项卡 li 和新的内容 section. 2. 把创建的两个元素追加到对应的父元素中. 3. 以前的做法:动态创建元素 createElement,但是...
  • 09-Vue实现tab栏切换案例

    千次阅读 2020-03-15 13:46:56
    选项卡案例 1、 HTML 结构 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <style type="text/css"> .tab ul { ...
  • 九、tab栏切换案例(自定义属性) 思路: ① Tab栏切换有2个大的模块。 ② 上的模块选项卡,点击某一个,当前这一个底色会是红色,其余不变(排他思想)修改类名的方式。 ③ 下面的模块内容,会跟随上面的选项卡变化。所以...
  • js实现tab栏切换案例

    2021-11-06 17:01:03
    点击某个导航,显示对应的内容,在很多网页里面都存在,思路: 利用for循环,注册点击事件,先创建一个样式类,当点击某一个元素时,利用排他思想,清除所有元素样式,然后点击了某个元素,就给被点击的元素添加...
  • 如图所示: 2、jquery做法 // 1、jQuery的方法 ... $('.tab_list li').click(function () { //1、当前小li添加currt类 其他兄弟去除currt类 $(this).addClass('currt').siblings().removeClass('currt'); // 2
  • 使用路由实现Tab栏切换 待付款 待发货 待收货 待付款商品信息 待发货商品信息 待收货商品信息 运行结果:
  • 初学js,跟着视频做了一个简单的tab栏切换案例。 案例分析: 当鼠标点击上面相应的选项卡(tab),下面内容跟随着变化 思路: 1、tab 切换有2个大的模块 2、最上面的模块选项卡,触摸其中的一个,当前这一个...
  • <li class="tab-item active">国际大牌◆</span></li> <li class="tab-item">国妆名牌◆</span></li> <li class="tab-item">清洁用品◆</span></li> <li class="tab-item">男士精品 <a href="###"><img ...
  • JS基础-Tab栏切换案例

    2022-04-16 17:27:11
    整体分成两个部分,第一个部分是点击上面的item点击哪一个对应哪一个就有被点击的效果,这个阔以通过排他思想来写,排他思想还没搞明白的阔以看看我这篇博客:JS基础-排他思想案例_setTimeout()的博客-CSDN博客 ...
  • 案例tab 栏切换(重点案例) 业务需求: 当鼠标点击上面相应的选项卡(tab),下面内容跟随变化。 案例分析: (1)Tab 栏切换有2个大的模块。 (2)上面的模块选项卡,点击某一个,当前这一个底色会是红色,...
  • 点击 tab栏,可以切换效果. 点击 + 号, 可以添加 tab 项和内容项. 点击 x 号, 可以删除当前的tab项和内容项. 双击tab项文字或者内容项文字,可以修改里面的文字内容. html部分 <body> <main> <h4>...
  • 类中添加方法: 类的继承 super关键字,调用父类中的构造函数 super可以调用父类的普通函数 constructor里面的this指向实例对象,方法里面的this指向方法的调用者 点击 tab栏切换案例:(面向对象案例) element....
  • 比如常见的 tab 切换。一时间,我有些犹豫了,有没有必要滥用 vue-router。那到底何时用才叫合理呢? 先上代码,用两种方式实现的效果 使用vue-router router import Tab1 from './components/tab/TabOne' import ...
  • Tab栏切换案例jquery代码 这里可以看到,利用了jQuery,很方便的就可以写出想要的效果 < style > * { margin : 0 ; padding : 0 ; } . tab { border : 1 px solid gray ; height : 300 px...
  • tab栏如下图 具体情况如上 先分好结构 代码部分: <style> .item { display :none;} .tabtop li{ float:left; height:39px; padding:0 20px; text-align:center; cursor:pointer; } .item...
  • 面向对象案例Tab栏切换面向对象案例面向对象版Tab栏切换总结 面向对象案例 面向对象版Tab栏切换 功能需求: 点击 Tab ,可以切换效果。 点击 + 号,可以添加 Tab 项和内容项。 点击 x 号,可以删除当前的...
  • } style> head> <body> <div class="tab"> <div class="tab_list"> <ul> 商品介绍li> 规格与包装li> 售后保障li> 商品评价(50000)li> 手机社区li> ul> div> <div class="tab_con"> ;"> 商品介绍模块内容 div> ...
  • 之前我们用原生js实现过Tab栏的分页切换效果,这是一种面向过程的方式,详见【JavaScript】自定义属性的应用案例——Tab栏分页切换,而今天我们来通过一种面向对象的方式来重新实现一下Tab栏分页切换。 两大编程思想...
  • 最近学习vue的时候用vue实现了一个简单的tab栏切换,分享给大家 文章目录一、案例介绍?二、案例代码总结 一、案例介绍? 效果如下: 该案例主要是在tab盒子上面放一个ul里面有五个小li,下方对应的是五个盒子,...
  • } .tab ul { display: flex; } .tab ul li { list-style: none; text-align: center; border: 1px solid blue; /* 将ul等分为3个li */ flex: 1; } .tab div { display: none; } img { border: 1px solid red; width...

空空如也

空空如也

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

tab栏切换案例

友情链接: PreviewDialog.rar