原生js移除或添加样式

时间：2019-04-03 13:09:54 阅读：137 评论：0 收藏：0 [点我收藏+]
样式效果如下，点击商品详情添加样式active
技术分享图片
代码
<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="Generator" content="EditPlus®">
    <meta name="Author" content="">
    <meta name="Keywords" content="">
    <meta name="Description" content="">
    <title>Document</title>
    <style>
        .P_nav {
            top: 0;
            position: absolute;
            width: 888px;
            height: 48px;
            border: 1px solid #eaeaea;
            background-color: #f8f8f8;
        }

            .P_nav .active {
                color: #d41c44;
                background-color: #fff;
                font-weight: bold;
            }

            .P_nav span {
                position: relative;
                display: inline-block;
                border-right: 1px solid #eaeaea;
                width: 159px;
                color: #333;
                text-align: center;
                height: 48px;
                line-height: 48px;
                font-size: 16px;
                cursor: pointer;
                vertical-align: top;
            }

        a, a:hover {
            color: #51b8f1;
        }

        .goods_parameter {
            padding: 15px 0 0 20px;
            overflow: hidden;
            *zoom: 1;
            position: relative;
            border-left: 1px solid #eaeaea;
            border-right: 1px solid #eaeaea;
            border-bottom: 1px solid #eaeaea;
        }

        ol, ul {
            list-style: none;
        }

        .goods_parameter li {
            float: left;
            width: 40%;
            height: 18px;
            line-height: 18px;
            font-size: 12px;
            color: #333;
            padding: 5px 0 0 0;
            margin-right: 3%;
        }

        .ellipsis {
            overflow: hidden;
            -o-text-overflow: ellipsis;
            text-overflow: ellipsis;
            white-space: nowrap;
            word-break: keep-all;
            word-wrap: normal;
        }

        .P_nav span em {
            color: #d41c44;
            font-style: normal;
        }
    </style>



</head>
<body>
    <span>11111</span>
    <div class="P_nav j-nav" style="">
        <span id="s1" class="j-imagedetailTab j-navtab active" style="cursor:pointer" onclick="showProductInfo(1)">商品详情<i></i></span>
        <span id="s2" class="j-userratingTab j-navtab" style="cursor:pointer" onclick="showProductInfo(2)">用户评价<em> <b id="commentCounts" class="commentCount v1 v0">2264</b> </em><i></i></span>
    </div>

    <div id="goodsDetail" class="j-imagedetail j-navinfo">



        <ul class="goods_parameter">

            <li title="5.8 英寸" class="ellipsis">屏幕尺寸：5.8 英寸</li>

            <li title="1200万像素" class="ellipsis">后置摄像头像素：1200万像素</li>

            <li title="A11+M11 运动协处理器" class="ellipsis">CPU型号：A11+M11 运动协处理器</li>

            <li title="5.6英寸及以上" class="ellipsis">屏幕尺寸：5.6英寸及以上</li>

            <li title="64GB" class="ellipsis">机身内存：64GB</li>

            <li title="全网通" class="ellipsis">网络类型：全网通</li>

            <li title="iPhone X" class="ellipsis">型号(宣传型号)：iPhone X</li>

            <li title="2017.09.22" class="ellipsis">上市时间：2017.09.22</li>



        </ul>

    </div>

    <div id="userRating" class="goods_parameter">
        <br />
        <br />
        212121323234
        <br />
        212121323234
    </div>

    <script>
        function showProductInfo(a) {
            if (a == 1) {
                addClass(document.getElementById(‘s1‘), ‘active‘);
                removeClass(document.getElementById(‘s2‘), ‘active‘);

                document.getElementById(‘goodsDetail‘).style.display = "";
                document.getElementById(‘userRating‘).style.display = "none";
            }
            else {
                addClass(document.getElementById(‘s2‘), ‘active‘);
                removeClass(document.getElementById(‘s1‘), ‘active‘);
                document.getElementById(‘goodsDetail‘).style.display = "none";
                document.getElementById(‘userRating‘).style.display = "";
            }
        }

        function hasClass(ele, cls) {
            cls = cls || ‘‘;
            if (cls.replace(/\s/g, ‘‘).length == 0) return false; //当cls没有参数时，返回false
            return new RegExp(‘ ‘ + cls + ‘ ‘).test(‘ ‘ + ele.className + ‘ ‘);
        }

        function addClass(ele, cls) {
            if (!hasClass(ele, cls)) {
                ele.className = ele.className == ‘‘ ? cls : ele.className + ‘ ‘ + cls;
            }
        }

        function removeClass(ele, cls) {
            if (hasClass(ele, cls)) {
                var newClass = ‘ ‘ + ele.className.replace(/[\t\r\n]/g, ‘‘) + ‘ ‘;
                while (newClass.indexOf(‘ ‘ + cls + ‘ ‘) >= 0) {
                    newClass = newClass.replace(‘ ‘ + cls + ‘ ‘, ‘ ‘);
                }
                ele.className = newClass.replace(/^\s+|\s+$/g, ‘‘);
            }
        }
    </script>

</body>
</html>
原生js移除或添加样式
原文：https://www.cnblogs.com/huangzhen22/p/10648126.html
踩
(0)
评论一句话评论（0）
分享档案
更多>
2021年09月23日 (328)
2021年09月24日 (313)
2021年09月17日 (191)
2021年09月15日 (369)
2021年09月16日 (411)
2021年09月13日 (439)
2021年09月11日 (398)
2021年09月12日 (393)
2021年09月10日 (160)
2021年09月08日 (222)