js 选项卡、添加类名(需要查重)和移除类名(不需要查重)

最新推荐文章于 2022-03-28 20:43:16 发布
最新推荐文章于 2022-03-28 20:43:16 发布
阅读量661 收藏
点赞数
分类专栏： js
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_37243717/article/details/79492448
版权

选项卡


<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="Keywords" content="关键字,关键词">
    <meta name="Description" content="描述和简介">
    <title>Title</title>
    <style type="text/css">
        *{margin:0;padding:0;}
        body,ul,li,ol,dl,dd,p,h1,h2,h3,h4,h5,h6{ margin:0;}
        a{text-decoration:none;}
        img{border:none;}
        ol,ul{list-style:none;}
        #box{
            position: relative;
            width: 360px;
            height: 580px;
            margin : 50px auto;
        }
        #box .pic{
            float: left;
            position: relative;
            width: 325px;
            height: 100%;
        }
        #box .pic img{
            display: none;
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
        }
        #box .pic img.show{
            display: block;
        }
        #box .txt{
            position: absolute;
            bottom: 0;
            left: 0;
            width: 325px;
            height: 30px;
            background: rgba(0,0,0,0.5);
            text-align: center;
            line-height: 30px;
            color: #fff;
            font-size: 14px;
        }
        #box .tab{
            float: left;
            width: 30px;
        }
        #box .tab ul li{
            width: 30px;
            height: 30px;
            margin-bottom: 2px;
            background: #000;
            line-height: 30px;
            text-align: center;
            font-size: 16px;
            font-weight: bold;
            cursor: pointer;
            color: #fff;
        }
        #box .tab ul li.active{
            background: #ff305c;
        }
        #box .tab ul li.aa{
            border: 5px solid yellowgreen;
        }
    </style>
</head>
<body>
    <div id="box">
        <div class="pic">
            <img class="show" src="images/g1.jpg" alt="">
            <img src="images/g2.jpg" alt="">
            <img src="images/g3.jpg" alt="">
            <img src="images/g4.jpg" alt="">
        </div>
        <p class="txt">可爱萌狗狗</p>
        <div class="tab">
            <ul>
                <li class="active aa">1</li>
                <li>2</li>
                <li>3</li>
                <li>4</li>
            </ul>
        </div>
    </div>

    <script>
        var aImg = document.querySelectorAll("#box .pic img"),
            aTab = document.querySelectorAll("#box .tab ul li"),
            oTxt = document.querySelector("#box .txt"),
            pArrTxt = ["可爱萌狗狗","萌萌小猫咪","呆萌小猫咪","愤怒小翠鸟"],
            length = aImg.length,
            index = 0;

        for(var i = 0; i < length; i++){
            aTab[i].ind = i;//自一定属性，存下索引的值
            aTab[i].onclick = function (){
                aImg[index].className = "";
                aTab[index].className = "";
                index = this.ind;
                aImg[index].className = "show";
                aTab[index].className = "active";
                oTxt.innerHTML = pArrTxt[index];
            };
        };

    </script>
</body>
</html>

添加类名(需要查重)

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="Keywords" content="关键字,关键词">
    <meta name="Description" content="描述和简介">
    <title>Title</title>
    <style type="text/css">
        *{margin:0;padding:0;}
        body,ul,li,ol,dl,dd,p,h1,h2,h3,h4,h5,h6{ margin:0;}
        a{text-decoration:none;}
        img{border:none;}
        ol,ul{list-style:none;}
    </style>
</head>
<body>
    <!--
        addClass 添加类名
            1: 全部类名都要进行查重
            2: 空格是否要加上

    -->
    <div id="box" class="on on aa wrap dachui aa"></div>

    <script>
        var oBox = document.getElementById("box");


        addClass(oBox, "on on dachui on dachui wrap wrap on wrap aa dachui");

        //arr = ["on","on","dachui"];
        function addClass (ele , cName){
            //先把原先的类名和传进来的类名按照空格进行切割
            var arr1 = ele.className.split(" ");
            var arr2 = cName.split(" ");
            var arr3 = arr1.concat(arr2);
            console.log(arr3);

            /*for(var i = 0; i < arr3.length; i++){
                for(var j = i+1; j < arr3.length; j++){
                    if(arr3[i] == arr3[j]){
                        arr3.splice(j,1);//从第j个开始,删除一个(把第j个删除掉)
                    }
                };
            };*/
            for(var i = 0; i < arr3.length; i++ ){
                for(var j = arr3.length-1; j > i; j--){
                    if(arr3[i] == arr3[j]){
                        arr3.splice(j,1);
                    };
                };
            };
            ele.className = arr3.join(" ");
            console.log(arr3);
        };


    </script>
</body>
</html>

移除类名(不需要查重)

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="Keywords" content="关键字,关键词">
    <meta name="Description" content="描述和简介">
    <title>Title</title>
    <style type="text/css">
        *{margin:0;padding:0;}
        body,ul,li,ol,dl,dd,p,h1,h2,h3,h4,h5,h6{ margin:0;}
        a{text-decoration:none;}
        img{border:none;}
        ol,ul{list-style:none;}
    </style>
</head>
<body>
    <div id="box" class="on wrap wrap aa dachui wrap dachui bb cc"></div>

    <script>
        var oBox = document.querySelector("#box");

        removeClass(oBox,"on dachui wrap bb");

        function removeClass(ele,cName){
            var arr1 = ele.className.split(" ");
            var arr2 = cName.split(" ");
            console.log(arr1);
            console.log(arr2);
            for(var i = 0; i < arr2.length; i++){
                for(var j = arr1.length-1; j >= 0; j--){
                    if(arr2[i] == arr1[j]){
                        arr1.splice(j,1);
                    }
                };
            };
            ele.className = arr1.join(" ");
        };
    </script>
</body>
</html>
Casablanca_jhBi
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
原生JS 实现给标签添加类名
weixin_44711440的博客
12-20 5178
原生js点击添加类名
addClass、removeClass、toggleClass三者的区别
一根破棍子的博客
09-01 4721
.addClass(“className”)方法是用来给指定元素增加类名，也就是说给指定的元素追加样式；  .removeClass(“className”)方法是用来给指定的元素移除类名，也就是说给指定元素移除样式；  .toggleClass(“className”)方法是用来给脂定的元素增加或移除类名（如果元素的类名存在就移除，如果不存在就增加），也就是说用来给指定的元素进行样式切换（如
原生JS添加类名 删除类名
weixin_34409822的博客
03-10 736
为 <div> 元素添加 class: document.getElementById("myDIV").classList.add("mystyle"); 为 <div> 元素添加多个类: document.getElementById("myDIV").classList.add("mystyle", "anotherCl...
JS删除类名和添加类名
qq_43372176的博客
06-28 4827
添加类名 element.classList.add(class1, class2, ...); 兼容IE8的写法 function addClass(el, className) { var oldClassStr = ''; //先判断元素中是否有class属性 if(ele.getAttribute('class')){ ...
用JS添加和删除class类名
codingWeb的博客
08-01 5381
下面介绍一下如何给一个节点添加和删除class名 添加：节点.classList.add(“类名”)； 删除：节点.classList.remove(“类名”)； 以tab切换为例： 在写tab切换的时候，通常我们会给选中的tab设置不同的样式，常用的方法是给被选中的tab新增一个class名，然后改这个class名的样式。 比如 起一个class名叫“active” 设置样式 .active{ ...
原生javascript实现Tab选项卡切换功能
10-24
总结来说，使用原生JavaScript实现Tab选项卡切换功能的核心在于有效地操作DOM元素，包括添加和移除类名、设置样式以及绑定事件监听器。这种实现方式不仅保持了代码的简洁性，还能在不依赖外部库的情况下提供良好的...
JS实现横向与竖向两个选项卡Tab联动的方法
10-23
它首先获取到横向和竖向选项卡的子元素，然后遍历这些元素，移除所有“current”类，再将当前选中的选项卡添加回“current”类，以突出显示。同时，它也隐藏所有内容区域，然后显示与选中选项卡对应的内容区域。 ...
javascript 通用简单的table选项卡实现
10-29
这个例子中，我们看到一个针对表格（table）的选项卡实现方法，它旨在减少重复的JavaScript代码，提高代码复用性和质量。下面我们将详细探讨这个实现过程及其关键知识点。 首先，我们需要在HTML文件中引入`table.js...
JS网站常用简洁TAB选项卡.zip
07-05
在网页设计中，选项卡（TAB）是一种常见的交互元素，用于组织和展示大量信息，而JavaScript（JS）作为客户端脚本语言，常被用来实现这些动态效果。"JS网站常用简洁TAB选项卡"是一个专为网页开发设计的资源，旨在提供...
JavaScript版TAB选项卡效果实例
10-26
这个JavaScript选项卡效果实例的优点在于其简洁和高效，只需要少量的JavaScript代码就能实现基本的选项卡切换功能。然而，它也有一些局限性，比如没有处理点击事件，也没有添加动画效果来增强用户体验。为了使效果更...
jQuery CSS 添加/删除类名
weixin_30289831的博客
02-20 240
addClass(class) — 为每个匹配的元素添加指定的类名。参数 : class — 一个或多个要添加到元素中的CSS类名，请用空格分开(String)示例 一 :为匹配的元素加上 'selected' 类HTML 代码:<p>Hello</p>jQuery 代码:$("p").addClass("selected");结果:[ <p class="selec...
JS 添加类名/删除类名
stone10086的博客
10-30 3958
为 元素添加 class:document.getElementById(“myDIV”).classList.add(“mystyle”);为 元素添加多个类:document.getElementById(“myDIV”).classList.add(“mystyle”, “anotherClass”, “thirdClass”);为 元素移除一个类:document.getElement
JavaScript - 选项卡切换、增加、删除、修改【面向对象方法】
Codefreyy
03-28 982
/* 面向对象：把公共的属性和方法抽取出来，写到类里面，再根据类实例化对象 */ //Tab对象：1、切换 2、添加 3、删除 4、修改
Javascript中数组查重的方法总结大全
zhangq0123的博客
10-17 1万+
数组查重：简单点说，就是找出数组中重复的元素然后去除，最后得到一个没有重复元素的数组。 // 方法一思路：     1.构建一个新的数组，用于存放结果。       2.for循环中每次从数组取出一个元素，用这个元素与结果数组的中的每个元素相比。       3.若结果数组中没有和取出的元素相同，则存放在结果数组中。 //自定义函数 var ret= function(arr){
js获取dom元素上所有的类名，增加类名，去除类名，切换类名(原生 vs jquery)
业余前端的职业经历
06-28 6899
我们都知道 一个元素可以写多个类名，每个类名之间使用空格隔开 <p class="p1 p2">hello world</p> 1.原生的方法 1.1.获取元素的类名 : el.classList 可以添加多个类名 中间空格隔开 var p=document.getElementsByTagName('p')[0]; console.log(p.classList） 1.2判断是否包括某个类名 el.classList.contains var p=document.ge
原生js添加类名
热门推荐
前端指南
01-18 5万+
     动态添加class类名在前端开发过程中是很常见得做法，比如说在实现轮播图的时候给当前图片的锚点添加一个active类,有又或者在实现动画的时候添加一个终态css类。     当然，有很多js库中封装了添加类名的方法，典型的比如jquery中的addClass()方法。但是，在实际开发中，如果页面比较简单，逻辑功能不是特别复杂的时候。还是推荐用原生的js来实现这些功能，这样能够有效的提升...
js实现选项卡淡入效果
最新发布
05-11
3. 为当前选项卡添加类名`active`，并使用`fadeOut()`函数来实现当前选项卡对应的内容淡出的效果； 4. 在淡出效果结束后，使用`fadeIn()`函数来实现当前选项卡对应的内容淡入的效果。 这样就可以实现选项卡的淡入...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值